topic Re: registry.byId returning undefined for existing widget in WAB2.8 in Web AppBuilder Custom Widgets Questions

registry.byId returning undefined for existing widget in WAB2.8

AndrewTerwiel — Sun, 12 Dec 2021 08:30:14 GMT

I have a custom widget settings file that is calling dijit.registry.byId on a textbox that I know exists, but the function is returning undefined. This is occurring in the settings startup function and only began failing when I migrated from WAB2.7 to 2.8.

Snippet

startup: function () {
                console.log('startUp');
                this.inherited(arguments);
                parser.parse();

                var textNode = registry.byId("maxZoomTextBox");
                if (textNode)
                    textNode.set('value', this.config.maxZoom);
            },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<div>
    <label>${nls.maxZoomTextBoxLabel}</label>
    <input id="maxZoomTextBox" data-dojo-type="dijit/form/TextBox" type="text" style="width:40px;"/>
    <br />
    <br />
    <label>${nls.featurelayerTextBoxLabel}</label>
    <br />
    <div class="jimu-widget-clusterer-setting-layers-container" data-dojo-attach-point="layersContainer" id="layersContainerDiv">
    </div>
    <div class="jimu-btn add-featurelayer" data-dojo-attach-point="addFeaturelayer" data-dojo-attach-event="onclick:_onBtnAddFeaturelayerClicked">Add feature layer</div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

textNode always = undefined

Can anyone see what I'm doing wrong?

Re: registry.byId returning undefined for existing widget in WAB2.8

Adri2cPérez_Beneito — Thu, 17 May 2018 07:08:01 GMT

Hi!

You can try this ('dojo/dom' must be imported):

dom.byId("maxZoomTextBox").value = this.config.maxZoom;

Re: registry.byId returning undefined for existing widget in WAB2.8

AndrewTerwiel — Thu, 17 May 2018 21:40:58 GMT

dom.byId does not return a dijit, it returns a dom node.

Re: registry.byId returning undefined for existing widget in WAB2.8

RobertScheitlin__GISP — Thu, 17 May 2018 21:46:16 GMT

Andrew,

You should be using data-dojo-attach-point on all your controls. That way you can get access to them using this.blahblah

Re: registry.byId returning undefined for existing widget in WAB2.8

AndrewTerwiel — Sun, 12 Dec 2021 08:30:17 GMT

I've ended up creating the TextBox programmatically instead of declaratively, as the declarative code was not creating a dijit in the DOM. I don't know why. Here's the code that works.

var maxZoomTextBox = new TextBox({
                    class: 'clusterer-maxzoom-textbox',
                    style: 'width: 40px; margin-top: 5px; margin-bottom: 5px;',
                    id: 'maxZoomTextbox'
                });
                maxZoomTextBox.set('value', this.config.maxZoom);
                maxZoomTextBox.placeAt('maxZoomTextBoxDiv');‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<div>
    <label>${nls.maxZoomTextBoxLabel}</label>
    <div data-dojo-attach-point="maxZoomTextBox" data-dojo-props='style:{width:"40px"}'
         id="maxZoomTextBoxDiv"></div>
    <br />
    <br />
    <label>${nls.featurelayerTextBoxLabel}</label>
    <br />
    <div class="jimu-widget-clusterer-setting-layers-container" data-dojo-attach-point="layersContainer" id="layersContainerDiv">
    </div>
    <div class="jimu-btn add-featurelayer" data-dojo-attach-point="addFeaturelayer" data-dojo-attach-event="onclick:_onBtnAddFeaturelayerClicked">Add feature layer</div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
‍‍‍‍‍‍‍‍‍‍‍

Re: registry.byId returning undefined for existing widget in WAB2.8

RobertScheitlin__GISP — Thu, 17 May 2018 21:49:20 GMT

Did you include dijit/form/TextBox in your settings.js and do you have widgetsInTemplateMixin in your define and declare?

Re: registry.byId returning undefined for existing widget in WAB2.8

AndrewTerwiel — Thu, 17 May 2018 22:15:40 GMT

Hi Robert, I'm now doing that, but registry.byId is still returning undefined when I go registry.byId(this.maxZoomTextBox.id)

Re: registry.byId returning undefined for existing widget in WAB2.8

AndrewTerwiel — Thu, 17 May 2018 22:20:45 GMT

I already had dijit/form/TextBox, and just now added widgetsInTemplateMixin, but it made no difference.

Re: registry.byId returning undefined for existing widget in WAB2.8

RobertScheitlin__GISP — Thu, 17 May 2018 22:32:42 GMT

Andrew so you added dijit._WidgetsInTemplateMixin to the define array list and also the declare _WidgetsInTemplateMixin to the declare array (that is the step most developers forget)

Re: registry.byId returning undefined for existing widget in WAB2.8

RobertScheitlin__GISP — Thu, 17 May 2018 23:09:55 GMT

Andrew

registry.byId(this.maxZoomTextBox.id) Is not the way to do it. All you need in your code is this.maxZoomTextBox ( assuming that is what you put for the data-dojo-attach-point) to get widget reference.

Re: registry.byId returning undefined for existing widget in WAB2.8

RobertScheitlin__GISP — Thu, 17 May 2018 23:13:10 GMT

If the html element is a true dijit/form/TextBox and not just a standard html input text the there will be visible evidence like a blue focus rectangle when you click in the textbox. If you are not getting the blue focus rectangle then you don’t actually have a dijit and it is just an html textbox.

Re: registry.byId returning undefined for existing widget in WAB2.8

AndrewTerwiel — Thu, 17 May 2018 23:51:02 GMT

Yes, it appears to be an ordinary HTML textbox, even though I've added the data-dojo-type="dijit/form/TextBox" attribute. I had thought this would add it to the DOM as a true dijit as happens in ESRI's Coordinate Conversion widget for the scale numbertextbox. But as you said earlier I was going about it in a cumbersome way, although it used to work, and I'm now just referencing the object with this.maxZoomTextbox, which works. Thanks.

Re: registry.byId returning undefined for existing widget in WAB2.8

RobertScheitlin__GISP — Fri, 18 May 2018 00:23:19 GMT

Andrew,

If you post your settings.js I can have a look at what you might have missed.

Re: registry.byId returning undefined for existing widget in WAB2.8

RobertScheitlin__GISP — Fri, 18 May 2018 02:38:53 GMT

So this is what I was talking about when I mentions the declare too.

return declare([BaseWidgetSetting, _WidgetsInTemplateMixin], {

Re: registry.byId returning undefined for existing widget in WAB2.8

AndrewTerwiel — Sun, 12 Dec 2021 08:30:20 GMT

This is the modified settings.js without the call to registry.byId. Line 85 is where I've changed it to your suggested code.

define([
    'dojo/_base/declare',
    'dijit/_WidgetsInTemplateMixin',
    'jimu/BaseWidgetSetting',
    'esri/request',
    'esri/domUtils',
    'dojo/parser',
    'dojo/Deferred',
    'dojo/_base/lang',
    'dojo/_base/connect',
    'dojo/_base/array',
    'dojo/request/script',
    'dojo/dom-construct',
    'dojo/query',
    'dojo/on',
    'dijit/form/Button',
    'dijit/form/TextBox',
    'dijit/registry'
],
    function (declare,
        _WidgetsInTemplateMixin,
        BaseWidgetSetting,
        esriRequest,
        domUtils,
        parser,
        Deferred,
        lang,
        connect,
        arrayUtils,
        script,
        domConstruct,
        query,
        on,
        Button,
        TextBox,
        registry) {

        return declare([BaseWidgetSetting], {
            baseClass: 'jimu-widget-clusterer-setting',

            _layerOrdinal: 0,

            // 1.
            setConfig: function (config) {
                console.log('setConfig');
                this.config = config;
            },

            // 2.
            postCreate: function () {
                //the config object is passed in
                this.setConfig(this.config);
                console.log('postCreate');

            },

            // 3.
            startup: function () {
                console.log('startUp');
                this.inherited(arguments);
                parser.parse();

                arrayUtils.forEach(this.config.featureLayers, lang.hitch(this, function (layer) {
                    var textBox = new TextBox({
                        class: 'clusterer-featurelayer-textbox',
                        style: 'width: 600px; margin-top: 5px; margin-bottom: 5px;',
                        id: 'featureLayerTextbox-' + this._layerOrdinal
                    });
                    textBox.set('value', layer);
                    textBox.placeAt('layersContainerDiv', 'last');

                    var button = domConstruct.create('div',
                        {
                            class: 'jimu-btn',
                            innerHTML: 'Remove',
                            style: 'margin-left: 5px',
                            id: 'removeLayerBtn-' + this._layerOrdinal
                        },
                        'layersContainerDiv');
                    on(button, 'click', this._removeLayerBtnClick);

                    this._layerOrdinal += 1;
                }));

                this.maxZoomTextBox.value = this.config.maxZoom;
            },


            _featureLayerTextBox1: null,

            _getfeatureLayerTextBox1: function () {
                this._featureLayerTextBox1 = registry.byId('featureLayerTextBox1');
            },

            getConfig: function () {
                console.log('getConfig');
                var layers = [];
                var textboxes = query('.clusterer-featurelayer-textbox');
                arrayUtils.forEach(textboxes, lang.hitch(this, function (box) {
                    var textbox = registry.byNode(box);
                    layers.push(textbox.get('value'));
                }));

                var maxZoomTextBoxValue = this.maxZoomTextBox.value;

                //WAB will get config object through this method
                return {
                    maxZoom: maxZoomTextBoxValue,
                    featureLayers: layers
                };
            },

            _writeSearchREST: function () {
                this.config.maxZoom = this.getConfig().maxZoom;
                this.config.featureLayers = this.getConfig().featureLayers;
            },

            _onBtnAddFeaturelayerClicked: function () {

                var textBox = new TextBox({
                    class: 'clusterer-featurelayer-textbox',
                    style: 'width: 600px; margin-top: 5px; margin-bottom: 5px;',
                    id: 'featureLayerTextbox-' + this._layerOrdinal
                });
                textBox.placeAt('layersContainerDiv', 'last');

                var button = domConstruct.create('div',
                    {
                        class: 'jimu-btn',
                        innerHTML: 'Remove',
                        style: 'margin-left: 5px',
                        id: 'removeLayerBtn-' + this._layerOrdinal
                    },
                    'layersContainerDiv');
                on(button, 'click', this._removeLayerBtnClick);

                this._layerOrdinal += 1;
            },

            _onBtnSaveLayersClicked: function () {
                this._writeSearchREST();
            },

            _removeLayerBtnClick: function (event) {
                var id = event.target.id;
                var ordinal = id.split('-')[1];
                var textbox = registry.byId('featureLayerTextbox-' + ordinal);
                textbox.destroy(false);
                domConstruct.destroy('removeLayerBtn-' + ordinal);
            }

        });
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍