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; } } }

Web App Builder dijit Splash question

JasonSheldon

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!

Find more posts tagged with

Accepted answers

All comments

RobertScheitlin__GISP

Exactly, there is no option to customize it.

MarkLache1

This login screen is not as nice as portal, nor does it have an option to customize it. App is hosted on my own web server.

RobertScheitlin__GISP

Mark,

See this thread for your answer:

https://community.esri.com/thread/200287-is-it-possible-to-customize-the-login-page-in-portal-for-arcgis#comment-710254

MarkLache1

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:

JasonSheldon

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!

RobertScheitlin__GISP

Jason,

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

Laura_0-1765398501322.png

JasonSheldon

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

RobertScheitlin__GISP

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:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _getWidgetConfig<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>widgetName<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> widgetCnfg <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; array<SPAN class="punctuation token">.</SPAN><SPAN class="token function">some</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>wManager<SPAN class="punctuation token">.</SPAN>appConfig<SPAN class="punctuation token">.</SPAN>widgetPool<SPAN class="punctuation token">.</SPAN>widgets<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>aWidget<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>aWidget<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">==</SPAN> widgetName<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; widgetCnfg <SPAN class="operator token">=</SPAN> aWidget<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>widgetCnfg<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">/*Check OnScreen widgets if not found in widgetPool*/</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; array<SPAN class="punctuation token">.</SPAN><SPAN class="token function">some</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>wManager<SPAN class="punctuation token">.</SPAN>appConfig<SPAN class="punctuation token">.</SPAN>widgetOnScreen<SPAN class="punctuation token">.</SPAN>widgets<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>aWidget<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>aWidget<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">==</SPAN> widgetName<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; widgetCnfg <SPAN class="operator token">=</SPAN> aWidget<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> widgetCnfg<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Code to actually open the splash widget:

<SPAN class="keyword token">var</SPAN> widgetCfg <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_getWidgetConfig</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Splash'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> splashWidget <SPAN class="operator token">=</SPAN> WidgetManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getInstance</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getWidgetByLabel</SPAN><SPAN class="punctuation token">(</SPAN>widgetCfg<SPAN class="punctuation token">.</SPAN>label<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
splashWidget<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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.