nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Create off-panel widget to display information automatically after splash screen

WilliamMiller4

I would like to show additional information after the user agrees to the terms & conditions on the splash screen. What ESRI or DOJO class (a dijit/Dialog perhaps?) should I use to display this information as an off-panel widget and how would I have it display automatically upon the close of the splash screen? Any help is much appreciated.

Find more posts tagged with

Accepted answers

evtguy

I'm not using WebApp Builder but here's how I've accomplished something that I think looks similar. I have a separate JS file that constructs the dialog (see attached code) and the dialog is created/displayed on a button click that triggers the showHelp() function inside the JS file. I've also attached a screenshot of the dialog.

The code isn't pasting very well into the post (Thanks, GeoNet!) so I'm attaching it as a file.

mapHelp.js

All comments

WilliamMiller4

Thanks for the links Rebecca. I had already looked at Larry's WelWhatDisHelpAbout widget though. If it were a free standing widget, I probably would use it, but it is dependent on the Acme widget. I'm hoping to find a simpler way.

WilliamMiller4

Thanks for the suggestion Michael. I was just hoping to have the content appear in the center of the browser, as part of its function is to act as a welcome screen. Also, my About widget currently provides information and instructions on how to use each of the widgets.

MichaelJenkins

I use the "about" widget for a similar purpose to what you describe. Have you already ruled out that widget? I'm sure it wouldn't take much to programmatically open it when the splash screen is closed, then the user can open and close it when needed by clicking an icon.

WilliamMiller4

Hi Steve,

Could I have a look at your html for the widget?

Thanks,

William

RebeccaStrauch__GISP

If you haven;t looked Larry Stout 's custom widgets yet, might be worth a look. He has a different job now so can't always get back on follow up questions, but he has all the code needed Larrys Custom WAB Widgets and More and a live demo ArcGIS Web Application

This and many other custom widgets and WAB-Dev edition info can be found Web AppBuilder Developer Edition - Customization Resource List

evtguy

I did that but either my code was too much or something else because it appeared as though not all my code was present. I didn't want to risk posting partial code so I decided to just attach the file instead. I have a lot of distain for GeoNet.

WilliamMiller4

Thanks Steve! I'm looking at your code right now, and I'll let you know how it works on Monday.

By the way, if you want to add code in a GeoNet message, after clicking REPLY there is a link labeled Use advanced editor in the upper right corner of your reply message box (see image below).

If you click on that, you get a new screen and text field (see image below).

Once your code is in the text area, highlight it and go to the >>, select Syntax Highlighting, followed by the programing language you are using (see image below).

Below is an example of how it looks after the process is done.

Have a great weekend!

evtguy

The code isn't pasting very well into the post (Thanks, GeoNet!) so I'm attaching it as a file.

mapHelp.js

WilliamMiller4

Hi Robert,

I finally got back to this problem. Below is a picture of what I would like to accomplish, that is to display a TabContainer in the center of the browser. I have a working TabContainer using only dojo, but I'm not sure how to transition it to Web AppBuilder, especially how to center the container. Do I need to modify or create a layout in an existing theme (\client\stemapp\themes\FoldableTheme\layouts\default\config.json) or in a new theme? Any guidance will be much appreciated.

William

rscheitlin

WIlliam,

There is no pre-made dijit that meets your needs then. When working with out of panel widgets almost all of the UI development is on you as the developer.

WilliamMiller4

Hi Robert,

Thank you for your suggestion, but I should have been more specific in my original question. The reason I was thinking of making a widget was because I wanted users to be able to reference the information presented after the splash screen at any point in the application. I don't want the widget to be in a panel, as I would like it to be centered on the screen. I also wanted to include tabs to help organize the data. I'm hoping to include this widget in the headerController. Any thoughts on what ESRI/DOJO class I should use for this widget? Thanks again for your attention to this matter.

William

rscheitlin

yep

WilliamMiller4

Robert,

Would I add one of these to the onOkClick function in the splash widget?

rscheitlin

William,

To use the Message dijit is is as simple as:

new Message({
    titleLabel: "Some Title,
    message: "Some message"
});

or as advanced as:

          var qMessage = new Message({
              type: 'question',
              titleLabel: this.nls.warning,
              message: this.nls.graphicgeomtypemsg1 + "\n\n" + this.nls.graphicgeomtypemsg2,
              buttons: [{
                label: this.nls._continue,
                onClick: lang.hitch(this, lang.hitch(this, function () {
                  qMessage.close();
                  this.lastDrawCommonType = commontype;
                  this.lastDrawTool = geotype;
                  this.drawBox.clear();
                  this.garr = [];
                }))
              }, {
                label: this.nls.cancel,
                onClick: lang.hitch(this, lang.hitch(this, function () {
                  qMessage.close();
                  this.drawBox.activate(this.lastDrawTool);
                }))
              }]
            });

WilliamMiller4

Robert,

I added 'jimu/dijit/Message' to the splash widget's define and Message to the argument list. Where/How do I override the empty message string in Message.js?

William

rscheitlin

William,

Based on your scenario I would just add this to the splash widgets Widget.js in the define and not worry at all with adding a new widget. No there is no documentation on the Message dijit other then what you can derive from the code in the Message.js

WilliamMiller4

Hi Robert,

Would I include this in the define section of my widget? Is there any more documentation on this other than what is in the Message.js file itself? Also, can an off-panel widget be added to the headerController, and if not, where?

Thanks,

William

rscheitlin

William,

I would use jimu/dijits/Message.js for that.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.