Can't add Dialog to a Web AppBuilder widget.js file

DavidWendelken · ‎06-13-2017

Ok, I'm embarrassed. From the documentation this should be really easy, but I'm clearly missing something.

I'm trying to add a dialog to a widget. In the widget.js file, I've added a button that, when pressed, is supposed to create the dialog.

I've added the relevant references to the define and function at the top of the widget.

Here's the code to create the dialog:

var dialog = new Dialog({ title: 'dialog title', id: 'myDialogId', content: 'dialog content' }); dialog.placeAt(win.body()); dialog.startup(); dialog.show();
I've tried gobs of variations and it doesn't work.

I get what appears to be a box-shadowed tooltip that says "dialog title".
I get a loading gif in the middle of the page.
And the app becomes unresponsive!

Here is the html code that gets added to the page:

<div title="dialog title" class="jimu-loading-shelter" id="myDialogId" widgetId="myDialogId"> <div class="img-div" data-dojo-attach-point="imgDiv"> <img src="/webappbuilder/apps/2/jimu.js/images/loading2.gif" data-dojo-attach-point="loadingImg"></img> </div> <p data-dojo-attach-point="textNode"></p> </div>

No errors or warnings show up in the debugger console. No network calls. (The loading2.gif is already cached.)

Any idea what I'm doing wrong?

DavidWendelken · ‎06-14-2017

Ok, egg on my face time.

I had a mismatch between the list of libraries in the define and function.   So, the "Dialog" class wasn't really the Dialog class, it was something else.

That, sadly, had all the same methods.

First time I've made that mistake, so now I know.   When faced with inexplicable behavior, make sure you're actually using the class you think you are.

View solution in original post

IanGrasshoff · ‎06-13-2017

After taking a quick look, my initial guess is that you have a collision between widget ids. You have declared an html div element with the same widget id as the one that gets created for your dialog. Simple test, just change your id: 'myDialogId' to something like id: 'testId'

var dialog = new Dialog({ title: 'dialog title', id: 'myDialogId', content: 'dialog content' });

<div title="dialog title" class="jimu-loading-shelter" id="myDialogId" widgetId="myDialogId">

Also, not sure what version of ArcGIS JS API you are using..but you shouldn't need to call .startup() or .placeAt().

Here is an example of a simple dialog I am using that loads the content from an "splash.html" file.

//dojox "dojox/widget/DialogSimple"

var myDialog = new DialogSimple({ id: "splashScreen", title: "About", class: "splash-dialog", href: "splash.html", executeScripts: true }); myDialog.show();

Simple contents of "splash.html"

<body> <div style="width: 100%; height: 100%;">

<p>Content here</p> </div> </body>

IanGrasshoff · ‎06-13-2017

Side note, I should have read your original post more carefully. I didn't see that you are trying to show a dialog from within a Web App builder widget..my reply was regarding a standard javascript app. Maybe it will still be helpful...

DavidWendelken · ‎06-14-2017

First of all, thanks!
I notice you are using DialogSimple, not Dialog.   Any reason?

I know it's not an id conflict.   I had already eliminated that possibility.
If I don't use the placeAt method, nothing shows up on the screen. (And the screen doesn't become unresponsive, so I can press the button a second time. When I do so, I get an error (only 2nd time+ !) that the id has already been registered.   So it's clearly ok with the id the first time.)

DavidWendelken · ‎06-14-2017

Ok, egg on my face time.

I had a mismatch between the list of libraries in the define and function.   So, the "Dialog" class wasn't really the Dialog class, it was something else.

That, sadly, had all the same methods.

First time I've made that mistake, so now I know.   When faced with inexplicable behavior, make sure you're actually using the class you think you are.

IanGrasshoff · ‎06-14-2017

DialogSimple allows for script execution within my href:splash.html file. The dialog content comes from the splash.html file.