Login Widget - customized Splash Widget

2754
3
10-15-2019 03:21 AM
ShaikhNaseer
New Contributor II
3 3 2,754

#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();
$.ajax({

 url: "https://sampleserver.domain.com/Methodname_to_ValidateUsers?",
 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 this.me = document.getElementById(me[0].id);
 thisme.style.display = "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 ");
 this.open();
 
 }
});

 

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. sendtoshaikhnaseer@gmail.com

3 Comments
EthanVodra
New Contributor II

Can this be bypassed by using "inspect element" and just deleting the splash screen element?

EricaJackson
New Contributor

Can you accomplish this without a a developer version of Web AppBuilder?

dedtadeas
New Contributor

Hi, 

is there a way of doing this in Experience Builder? I was thinking of some available widget like solution. 

Thank you!

Best from 
T.