Web App Builder dijit Splash question

297
11
08-06-2018 09:35 PM
JasonSheldon
New Contributor III

Hi all,

I'm trying to call the dijit splash when a user clicks a login on the adopta web app builder app.  The app has a nice splash, that we're using as a disclaimer.  I'd like to call that exact splash when the user clicks login.  I've found the javascript that calls the login, and was able to add some javascript to do a confirm, but I'm using an standard javascript confirm function, and that doesn't let me add html to the form.  Any help would be greatly appreciated!  The app is http://gis.naperville.il.us/adoptastormdrain  Thanks!

0 Kudos
11 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Jason,

   You just need to get a reference to the splash widget and call it's startup function.

Helper function to add to the widget you are calling the splash widget from:

      _getWidgetConfig: function(widgetName){
        var widgetCnfg = null;
        array.some(this.wManager.appConfig.widgetPool.widgets, function(aWidget) {
          if(aWidget.name == widgetName) {
            widgetCnfg = aWidget;
            return true;
          }
          return false;
        });
        if(!widgetCnfg){
          /*Check OnScreen widgets if not found in widgetPool*/
          array.some(this.wManager.appConfig.widgetOnScreen.widgets, function(aWidget) {
            if(aWidget.name == widgetName) {
              widgetCnfg = aWidget;
              return true;
            }
            return false;
          });
        }
        return widgetCnfg;
      },

Code to actually open the splash widget:

var widgetCfg = this._getWidgetConfig('Splash');
var splashWidget = WidgetManager.getInstance().getWidgetByLabel(widgetCfg.label);
splashWidget.startup();
JasonSheldon
New Contributor III

Hi Robert,

Thanks much for the reply!  I tried using the code as above inside the login.js but am getting errors saying that the appConfig property is undefined.  Maybe putting this inside the login.js is the wrong place?  Will keep trying, as I think I see how it should be working.  I'm guessing it should be in the Widget.js for the Adopta widget...

Jason

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jason,

  Yes the widget.js is the better place that way it has the appConfig object.

JasonSheldon
New Contributor III

Thanks Robert,

I put the code in the widget.js, and it was able to get the widget, but I'm having trouble figuring out how to call the splashWidget.startup() from the button click event in the login.js.

Thanks again for your help, it's been a good learning exercise for me and I appreciate it!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jason,

   Sorry I am not familiar with a login.js file in WAB. My best advice is to make a window level variable that has the splash widget object that can be accessed by this login.js file.

0 Kudos
JasonSheldon
New Contributor III

Thanks Robert, good idea!  The issue I was having was that the widget manager would only ever return the Adopta widget, and not the the splash widget, so even though it would find the widget config with this.appConfig, if I added the widgetmanager (it wasn't there by default) it isn't able to find the widget using .getWidgetByLabel() .  Hopefully this makes sense!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jason,

 Hmm. I never had that issue before.

0 Kudos
MarkLache1
New Contributor III

I'm looking to alter my login screen from the stock WAB secured service screen to something more modern. Is the code above a good option?

My current login screen:

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor
0 Kudos