topic Referencing nodes in widget.html in Web AppBuilder Custom Widgets Questions

Referencing nodes in widget.html

JoelPerkins — Sun, 12 Dec 2021 09:12:55 GMT

Hello,

I'm working in WAB 2.12. I'm not sure why this wouldn't work, and I was hoping someone could point me in the right direction. I want a dialog box upon opening the widget, and I'm placing the button markup for the dialog box in widget.html, but i thought you were supposed to be able to reference the HTML via the data-dojo-attach-point. When my dialog box opens, it's empty. Do you know what I'm missing?

Widget.html

<div>
<div data-dojo-attach-point="myTemp" data-dojo-type="dijit/Dialog" title="My Title">
    <button class="btn" data-dojo-type="dijit/form/Button" type="button">Button1 </button>
    <button class="btn" data-dojo-type="dijit/form/Button" type="button">Button3</button>
    <button class="btn" data-dojo-type="dijit/form/Button" type="button">Button2</button>
</div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and Widget.js

define(['dojo/_base/declare',
    'dojo/_base/lang',
    "dijit/_WidgetsInTemplateMixin",
    'jimu/BaseWidget',
    "dijit/form/Button",
    "dijit/Dialog",
    "dojo/dom",
    'dojo/on',
    "esri/lang",
    "dojo/domReady!"
  ],
  function (declare,
    lang,
    _WidgetsInTemplateMixin,
    BaseWidget,
    Button,
    Dialog,
    dom,
    on,
    esriLang,

    ) {
    return declare([_WidgetsInTemplateMixin, BaseWidget], {

      baseClass: 'jimu-widget-myWidget',
      
      onOpen: function () {
        this.inherited(arguments);
        console.log('onOpen');

          this.myDialog = new Dialog({
            title: this.title,
            content: this.myTemp
          })
          this.myDialog.show();
     
        },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Referencing nodes in widget.html

RobertScheitlin__GISP — Tue, 04 Jun 2019 21:28:19 GMT

Joel,

A big issue I see is that you are creating a dialog decoratively and programatically. You should remove

data-dojo-type="dijit/Dialog"

from your div and just create the dialog programatically.

Re: Referencing nodes in widget.html

JoelPerkins — Sun, 12 Dec 2021 09:12:58 GMT

Robert,

Thanks. I can now create a dialog box programatically, and set the content as "this.myTemp" to get the template from Widget.html.

I guess I'm confused on how to access the button though, so I can add functionality to it. I could call the following "btn1" from my JS, but as soon as I add the data-dojo-type="dijit/form/button" on there, I can no longer call it. But if I leave it off, it's no longer a "dojo/button" and it loses it's style. Does that make sense?

<div data-dojo-attach-point="myTemp" title="My Title">
    <button class="btn" data-dojo-attach-point="btn1"></button>
</div>‍‍‍

Re: Referencing nodes in widget.html

RobertScheitlin__GISP — Wed, 05 Jun 2019 17:19:04 GMT

Joel,

The issue is that you are using the myTemp div as a container for the dialog and thus when it becomes a dialog you no longer have access to the this.btn1 as it is no longer part of the widget template but is now part of the dialog's Dom. I normally would create the buttons programatically too.

Re: Referencing nodes in widget.html

JoelPerkins — Thu, 06 Jun 2019 01:01:04 GMT

Ah, I see what you're saying. I made the changes and got it going. Thank you very much!!