Splash widget and application load lifecycle

654
1
Jump to solution
07-14-2017 08:34 AM
AndrewMurdoch
Occasional Contributor

Using an older version of Web AppBuilder (1.2), I am trying to use a modified "Splash screen" widget to present Terms and Conditions that must be accepted on initial application load prior to proceeding. This all works well, but on slower internet connections there is a small but usable "window of opportunity" for users to actively click on the map content and tools before the splash screen widget is loaded (which _does_ block access to the map, using a modal dialog panel and an "overlay" div).

How can I force the splash screen widget to load _before_ content is available to click on in the map? How can I make that modal overlay div be loaded before the rest of the map content? 

Is this something that is a known issue with older versions and perhaps is fixed in the latest version? Is this possible to implement using the default "splash screen" widget?

EDIT:
I appear to be able to partially mitigate this, by putting this line in the "postCreate" function:
   this.overlayNode.hidden = false;

This shortens, but does not eliminate the "window of opportunity" for clicking and accessing the map contents, however.
Is it possible to change the load order of onscreen widgets, to prevent map access?

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
AndrewMurdoch
Occasional Contributor

I'd love to know if there was an easier way to do this, but... this works.

I _was_ eventually able to make this work as I wanted. Perhaps this would not be an issue in most cases, but I am running a deferred database query in my Splash screen widget (to check a database table record to see if users have accepted the terms and conditions document). This causes a delay between loading of the Splash widget and rendering of the Splash widget interface.

I found that I needed to act on the "LoadingShelter" object used by the LayoutManager.js file in jimu.js folder.  This LoadingShelter object covers the screen while all widgets are loading and prevents user input while showing a "loading" gif.

I first commented out the code (in the _loadPreloadWidgets method) that removes or "destroys" the LoadingShelter in the LayoutManager class (normally runs when all widgets are finished loading). I then made the reference to the LoadingShelter object (still in the LayoutManager class) a "global" variable so that I could access the LoadingShelter's destroy method from my own splash screen widget when I was ready to release the application to user input. I just needed to establish a link to the LayoutManager class from the Splash widget.js file.

Now as long as the splash screen widget completes successfully, the LoadingShelter originally created by the LayoutManager is destroyed and removed allowing user input...

View solution in original post

0 Kudos
1 Reply
AndrewMurdoch
Occasional Contributor

I'd love to know if there was an easier way to do this, but... this works.

I _was_ eventually able to make this work as I wanted. Perhaps this would not be an issue in most cases, but I am running a deferred database query in my Splash screen widget (to check a database table record to see if users have accepted the terms and conditions document). This causes a delay between loading of the Splash widget and rendering of the Splash widget interface.

I found that I needed to act on the "LoadingShelter" object used by the LayoutManager.js file in jimu.js folder.  This LoadingShelter object covers the screen while all widgets are loading and prevents user input while showing a "loading" gif.

I first commented out the code (in the _loadPreloadWidgets method) that removes or "destroys" the LoadingShelter in the LayoutManager class (normally runs when all widgets are finished loading). I then made the reference to the LoadingShelter object (still in the LayoutManager class) a "global" variable so that I could access the LoadingShelter's destroy method from my own splash screen widget when I was ready to release the application to user input. I just needed to establish a link to the LayoutManager class from the Splash widget.js file.

Now as long as the splash screen widget completes successfully, the LoadingShelter originally created by the LayoutManager is destroyed and removed allowing user input...

0 Kudos