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

[AndrewTerwiel]

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?

[RobertScheitlin__GISP]

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.

[AndrewTerwiel]

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.

[RobertScheitlin__GISP]

Andrew,

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

[AndrewTerwiel]

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

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

[RobertScheitlin__GISP]

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

return declare([BaseWidgetSetting, _WidgetsInTemplateMixin], {