Repeatable launch of Splash screen from other buttons in the UI/widgets?

596
5
Jump to solution
11-16-2021 10:12 AM
EricRuberson1
New Contributor III

Hello. I've been trying to figure out how to launch a splash screen repeatably from other widgets or buttons.  Splash screen being defined as either the splash widget or something else that is customizable with images + texts + "I agree" checkbox.

The client asked us to isolate some layers into a seperate table of contents/layer list widget. We did that and got that mostly working. But the client wants a disclaimer/splash screen to pop up when the button which launches that seperate list is clicked. Additionally they want the disclaimer/splash to launch when another custom reporting widget is launched.

So this splash screen a) is not supposed to launch at the start of the app like the default splash widget, b) has to launch when a button in the headercontroller is clicked which launches the TOC widget and c) when a custom 'button' we added to the TOC is clicked, which launches yet another widget.

I looked at the default Esri splash widget.js code to try and figure out what makes it tick and couldnt quite figure it out. I saw that theres .focus and .blur (commenting .blur out did nothing), and various places that check for if the requires checkbox setup has been toggled on, but I'm not sure what like, actually locks off the rest of the screen from working or requires the checkbox be hit. 

So I don't really know how to proceed. Non Web-App-Builder javascript guides basically say just show a div over your screen and/or put the rest of your page in another div and hide it while the splash screen is up. I'm afraid trying that would break everything and am hesitant to try a non-WAB/non-Dojo solution if there is actually a WAB/Dojo solution out there.

While I wait and see if anyone here has suggestions I'm going to look into 'help dialogue' boxes because I recall making one of those in the past and those are kinda similar.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

@EricRuberson1 

Absolutely. I use the jimu message dijit in my eSearch widget several times. Here is one example that asks a question and assigns listeners to the buttons.

          var qMessage = new Message({
            type: 'question',
            titleLabel: this.nls.spatialchoicetitle,
            message: this.nls.spatialchoicemsg,
            buttons: [{
              label: this.nls.buffergraphics,
              onClick: lang.hitch(this, lang.hitch(this, function () {
                qMessage.close();
                var g = this.graphicsLayerBuffer.graphics[0];
                intersectGeom = g.geometry;
                this.search(intersectGeom, this.spatialLayerIndex, null, null, dataSpatialType);
              }))
            }, {
              label: this.nls.selectiongraphics,
              onClick: lang.hitch(this, lang.hitch(this, function () {
                qMessage.close();
                intersectGeom = this.unionGeoms(this.currentLayerAdded.graphics);
                this.search(intersectGeom, this.spatialLayerIndex, null, null, dataSpatialType);
              }))
            }]
          });

View solution in original post

0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Emeritus
0 Kudos
EricRuberson1
New Contributor III

Robert, I was looking at that code, I'll try to dive deeper into it.

0 Kudos
EricRuberson1
New Contributor III

Ah... Figured out that event.preventDefault() was the functional bit I was looking for which locks down the rest of the page from interaction. It's present in the splash widget and in code for launching Messages. And Messages do pretty much we want our splash button call to do, lock down the page and demand a response.

       event.preventDefault();

        var helpMessage = '<div class="intro">' +
        'this is a disclaimer popup'+
        //this.nls.helppopupmsg + // to make the real disclaimer, put it in strings.js
        '</div>';
        new Message({message: helpMessage});

Robert, do you know if we can add custom buttons or listen to the "Ok" button associated with a Message created from jimu/dijit/Message? I figure we can show the disclaimer message then load our custom widget after the message closes.

I see in jimu/dijit/Message.js it has a function called _preProcessing which looks for buttons and adds an ok button if none are present, so apparently we CAN add buttons but I'm not sure how. Also that function isnt called from within Message.js so how does it even run?

 

 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

@EricRuberson1 

Absolutely. I use the jimu message dijit in my eSearch widget several times. Here is one example that asks a question and assigns listeners to the buttons.

          var qMessage = new Message({
            type: 'question',
            titleLabel: this.nls.spatialchoicetitle,
            message: this.nls.spatialchoicemsg,
            buttons: [{
              label: this.nls.buffergraphics,
              onClick: lang.hitch(this, lang.hitch(this, function () {
                qMessage.close();
                var g = this.graphicsLayerBuffer.graphics[0];
                intersectGeom = g.geometry;
                this.search(intersectGeom, this.spatialLayerIndex, null, null, dataSpatialType);
              }))
            }, {
              label: this.nls.selectiongraphics,
              onClick: lang.hitch(this, lang.hitch(this, function () {
                qMessage.close();
                intersectGeom = this.unionGeoms(this.currentLayerAdded.graphics);
                this.search(intersectGeom, this.spatialLayerIndex, null, null, dataSpatialType);
              }))
            }]
          });
0 Kudos
EricRuberson1
New Contributor III

Robert, thanks so much! I'll run with this.

0 Kudos