Login Widget - customized Splash Widget

Blog Post created by EsriDevNaseer on Oct 15, 2019

#Splash #Loginform#WAB #Widget#customized 

How to achieve Login functionality by customized Splash Widget


1) Enable Splash Widget and modify Widget.html of splash to accept User credentials (add textusernametxtPassword).


2) under event onOkClick of Widget.js fetch credentials values and do $.ajax call for external web service for login. you have to refrence JQuery on index.html at the root of the application.


var user = $("#txtUserName").val();
var pass = $("#txtPassword").val();

url: "",
data: { "UserName": user, "Password": pass },
success: function (result) {

if (result.Is_Valid_User == true) {
// hide the splash
var me = document.getElementsByClassName("jimu-widget-splash-desktop jimu-widget-splash jimu-widget");
var = document.getElementById(me[0].id); = "none";
// do furter modifications as per results.values
// set localStorage if needed
else {
alert("Invalid Usename or Password");
error: function (err) {
alert(err.status + " Please check service settings ");;



create a custom widget and use it whenever you needed in web app applications.

best suitable for separately deployed WAB gis applications.

feel free to discuss.