topic Re: Registry Error in Custom Widget in Web AppBuilder Custom Widgets Questions

Registry Error in Custom Widget

AbhinavSharma — Sun, 12 Dec 2021 10:52:43 GMT

//Updated define //

//updated last line from fields to fieldNames//

Hi everyone, I am attempting to expand my widget by adding in a renderer that is is available to the end user. I have been working my way through the following ESRI Sample. The sample is for a mapservice and not a feature layer but I do not see why the same idea can not be applied. The issue is in bold. It stops at both of those instances. I have used console.log to see if there is any difference in the object that is being passed. ( Looked at the object in the sample and compared to my own) and the only difference i can find is when i print out fieldname after the push: using (console.log("fieldnames", fieldNames)

the sample looks like this:

fieldnames

{identifier: "value", label: "name", items: Array(2)}
1. identifier:"value"
2. items:Array(10)
  1. 0:
    1. name:["FIPS"]
    2. value:["FIPS"]
    3. _0:0
    4. _RI:true
    5. _S:{_arrayOfAllItems: Array(10), _arrayOfTopLevelItems: Array(10), _loadFinished: true, _jsonFileUrl: undefined, _ccUrl: undefined, …}
    6. __proto__:Object

whereas from my widget it looks like this:

fieldnames

{identifier: "value", label: "name", items: Array(1)}
1. identifier:"value"
2. items:Array(19)
  1. 0:
    1. name:"OBJECTID"
    2. value:"OBJECTID"

TypeError: Cannot read property 'on' of undefined

define(
['dojo/_base/declare',
'jimu/BaseWidget',
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/graphic",
"esri/request",
"esri/config",
"esri/tasks/ClassBreaksDefinition",
"esri/tasks/UniqueValueDefinition",
"esri/tasks/AlgorithmicColorRamp",
"esri/tasks/GenerateRendererParameters",
"esri/tasks/GenerateRendererTask",
"esri/layers/LayerDrawingOptions",
"esri/layers/FeatureLayer",
"esri/layers/Field",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/editing/TemplatePicker",
"dojo/_base/array",
"dojo/_base/event",
"dojo/_base/lang",
"dojo/parser",
"dijit/registry",
"dojo/data/ItemFileReadStore",
"dojox/grid/DataGrid",
"dijit/form/FilteringSelect",
"dojo/domReady!"],
function(declare, BaseWidget, Draw, Edit, Graphic, esriRequest, esriConfig,
 ClassBreaksDefinition, UniqueValueDefinition, AlgorithmicColorRamp,
 GenerateRendererParameters, GenerateRendererTask, LayerDrawingOptions,
 FeatureLayer,Field,
 SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
 TemplatePicker,
 arrayUtils, event, lang, parser, registry, ItemFileReadStore, DataGrid, FilteringSelect) {
 //To create a widget, you need to derive from BaseWidget.
 return declare([BaseWidget], {
 // DemoWidget code goes here
//please note that this property is be set by the framework when widget is loaded.
 //templateString: template,
baseClass: 'jimu-widget-ROP',
postCreate: function() {
 this.inherited(arguments);
 console.log('postCreate');
 },
startup: function() {
 ///INICIO/////
 parser.parse();
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
 esriConfig.defaults.io.proxyUrl = "/proxy/";
 map= this.map;
map.on("layers-add-result", initEditing);

 var landusePolygonLayer = new FeatureLayer("MyLayer", {
 id: "canada_Risk",//confirm works
 mode: FeatureLayer.MODE_ONDEMAND,
 outFields: ["*"]
 });
 console.log("LayerInfo", landusePolygonLayer)
 map.addLayers([landusePolygonLayer]);
//fieldInfo
 var canadaFields = esriRequest({
 url:"https://services7.arcgis.com/Layer",
 content:{
 f: "json"
 },
 callbackParamName : "callback"
 });
 console.log("fields", canadaFields)
 canadaFields.then(function(resp){
 var fieldNames, fieldStore;
fieldNames = { identifier : "value", label: "name", items: []};
 console.log("fields", fieldNames)
 arrayUtils.forEach(resp.fields,function(f){
 fieldNames.items.push({"name": f.name, "value": f.name});
 console.log("fieldnames", fieldNames)
 });
fieldStore = new ItemFileReadStore({ data:fieldNames});
 console.log("store", fieldStore)
 registry.byId("fieldNames").set("store", fieldStore);
 }, function(err){
 console.log("failed to get field names: ", err);
 });
 //update when field name changes
 registry.byId("fieldNames").on("change", getData);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Registry Error in Custom Widget

KenBuja — Wed, 24 Jan 2018 16:17:28 GMT

Registry is used to look for dijits in the DOM, not an object that you've declared in code. That's what's a little confusing about the Esri sample where it uses the same name for the variable and a DOM element. If you look at the body section, you'll see there is a FilteringSelect dijit with the id "fieldNames". This is what the registry is returning.

Re: Registry Error in Custom Widget

AbhinavSharma — Wed, 24 Jan 2018 16:30:26 GMT

Is there a different way to grab the fields from the object? I do use the same code in my widget.html though, i assumed that the objects should be the same if they are initiated the same way. ( I just chose to omit the var=[] because I am able to call my webmap using this.map)

Re: Registry Error in Custom Widget

KenBuja — Wed, 24 Jan 2018 16:47:42 GMT

So you have a "fieldNames" Select (or FilteringSelect) dijit in your html code? You should probably add that module into your define.

By the way, UniqueValueDefinition and ClassBreaksDefinition are not in the same order as you call the modules in define.

Re: Registry Error in Custom Widget

AbhinavSharma — Sun, 12 Dec 2021 10:52:46 GMT

My widget.html is a literal rip of the sample provided :

<label for="fieldNames">Render based on: </label>
 <select id="fieldNames" name="baseSym"
 data-dojo-type="dijit/form/FilteringSelect"
 data-dojo-props="style:'width:200px;'">
 </select>‍‍‍‍‍

I added the module to my define but still get the same error.

I also swapped the two definitions good catch!

Re: Registry Error in Custom Widget

KenBuja — Sun, 12 Dec 2021 10:52:49 GMT

What I've done in my widget is to get the element directly using this syntax. My Select dijit is defined this way in the html:

<div data-dojo-attach-point="sourceLayerFieldSelect" class="esriCTDownloadTabTextbox" data-dojo-type="dijit/form/Select"
  data-dojo-props='required:true,trim:true,disabled:true'>
</div>‍‍‍

In my js code, I get and set the properties this way, using the attach-point id:

this.sourceLayerFieldSelect.set('value', selectedCategoryFieldValue);‍

And here is how to wire events:

this.own(on(this.sourceLayerFieldSelect, 'change', lang.hitch(this, this._onPrioritizationFieldSelectChange)));‍

Re: Registry Error in Custom Widget

AbhinavSharma — Sun, 12 Dec 2021 10:52:51 GMT

What does selectedCategoryFieldValue refer to in this case? also would the second and third snippet of code replace the entire block of code:

var canadaFields = esriRequest({
 url:"https://services7.arcgis.com/",
 content:{
 f: "json"
 },
 callbackParamName : "callback"
 });
 console.log("fields", canadaFields)
 canadaFields.then(function(resp){
 var fieldNames, fieldStore;
fieldNames = { identifier : "value", label: "name", items: []};
 console.log("fields", fieldNames)
 arrayUtils.forEach(resp.fields,function(f){
 fieldNames.items.push({"name": f.name, "value": f.name});
 console.log("fields_Sliced", fieldNames)
 });

 fieldStore = new ItemFileReadStore({ data:fieldNames});
 console.log("store", fieldStore)
 registry.byId("fieldNames").set("store", fieldStore);
 }, function(err){
 console.log("failed to get field names: ", err);
 });
 //update when field name changes
 registry.byId("fieldNames").on("change", getData);
function getData(){
 classBreaks(map.defaultFrom, map.defaultTo);
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Registry Error in Custom Widget

KenBuja — Wed, 24 Jan 2018 17:57:02 GMT

selectedCategoryFieldValue is a variable that is used to set the Select dijit to a specific value.

My snippets would replace practically nothing of your code. They just show how to properly create the element and to get a reference to it. The third snippet would replace

registry.byId("fieldNames").on("change", getData);‍

You still have to create the store and set the dijit's store, which would be something like this:

this.fieldNames.set("store", fieldStore);‍

When you post code, please use the Syntax Highlighter, making the code easier to read and allow us to point to a specific line number

Re: Registry Error in Custom Widget

AbhinavSharma — Sun, 12 Dec 2021 10:52:54 GMT

I went ahead and made the changes but am now getting :

ReferenceError: on is not defined‍‍

from:

this.own(on(this.sourceLayerFieldSelect, 'change', lang.hitch(this, this._onPrioritizationFieldSelectChange)));
‍‍‍

Ill attach my current code:

define(
['dojo/_base/declare',
'jimu/BaseWidget',
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/graphic",
"esri/request",
"esri/config",
"esri/tasks/ClassBreaksDefinition",
"esri/tasks/UniqueValueDefinition",
"esri/tasks/AlgorithmicColorRamp",
"esri/tasks/GenerateRendererParameters",
"esri/tasks/GenerateRendererTask",
"esri/layers/LayerDrawingOptions",
"esri/layers/FeatureLayer",
"esri/layers/Field",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/editing/TemplatePicker",
"dojo/_base/array",
"dojo/_base/event",
"dojo/_base/lang",
"dojo/parser",
"dijit/registry",
"dojo/data/ItemFileReadStore",
"dojox/grid/DataGrid",
"dijit/form/FilteringSelect",
"dijit/form/Select",
"dojo/domReady!"],
function(declare, BaseWidget, Draw, Edit, Graphic, esriRequest, esriConfig,
        ClassBreaksDefinition, UniqueValueDefinition,  AlgorithmicColorRamp,
        GenerateRendererParameters, GenerateRendererTask, LayerDrawingOptions,
        FeatureLayer,Field,
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        TemplatePicker,
        arrayUtils, event, lang, parser, registry, ItemFileReadStore, DataGrid, FilteringSelect,select) {
  //To create a widget, you need to derive from BaseWidget.
  return declare([BaseWidget], {
    // DemoWidget code goes here

    //please note that this property is be set by the framework when widget is loaded.
    //templateString: template,

    baseClass: 'jimu-widget-ROP',

    postCreate: function() {
      this.inherited(arguments);
      console.log('postCreate');
    },

    startup: function() {
          ///INICIO/////
     parser.parse();

        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
        esriConfig.defaults.io.proxyUrl = "/proxy/";
          map= this.map;

        map.on("layers-add-result", initEditing);


        var landusePolygonLayer = new FeatureLayer("https://services7/ArcGIS/rest/", {
          id: "canada_Risk",//confirm works
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
        console.log("LayerInfo", landusePolygonLayer)
       map.addLayers([landusePolygonLayer]);

       //fieldInfo
       var canadaFields = esriRequest({
         url:"https://services7.arcgis.comter/0",
         content:{
           f: "json"
         },
         callbackParamName : "callback"
       });
       console.log("fields", canadaFields)
       canadaFields.then(function(resp){
         var fieldNames, fieldStore;

         fieldNames = { identifier : "value", label: "name", items: []};
         console.log("fields", fieldNames)
         arrayUtils.forEach(resp.fields,function(f){
           fieldNames.items.push({"name": f.name, "value": f.name});
           console.log("fields_Sliced", fieldNames)
           this.sourceLayerFieldSelect.set("value", f.name)
        });

       fieldStore = new ItemFileReadStore({ data:fieldNames});
       console.log("store", fieldStore)
        //registry.byId("fieldNames").set("store", fieldStore);
        this.fieldNames.set("store", fieldStore);
        }, function(err){
        console.log("failed to get field names: ", err);
        });
        //update when field name changes
        this.own(on(this.sourceLayerFieldSelect, 'change', lang.hitch(this, this._onPrioritizationFieldSelectChange)));

        function getData(){
          classBreaks(map.defaultFrom, map.defaultTo);
        }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Registry Error in Custom Widget

KenBuja — Wed, 24 Jan 2018 20:35:33 GMT

You have to add a reference for "dojo/on"

Re: Registry Error in Custom Widget

AbhinavSharma — Wed, 24 Jan 2018 20:41:23 GMT

Well that was stupid of me. I am now getting TypeError: Cannot read property 'set' of undefined from the line:

this.sourceLayerFieldSelect.set("value", f.name)‍

Re: Registry Error in Custom Widget

KenBuja — Sun, 12 Dec 2021 10:52:57 GMT

What is the name of your dijit? You're using the name from my example, but from your html you posted earlier, should it be

this.fieldNames.set("value", f.name)‍

If that's not the case, then post your html code.

Re: Registry Error in Custom Widget

AbhinavSharma — Sun, 12 Dec 2021 10:53:00 GMT

I actually added both

<div class="jimu-widget-use-jquery">
Use ctrl or cmd + click on graphic to delete.  Double click on graphic to edit vertices.
<div id="templatePickerDiv"></div>
<label for="fieldNames">Render based on: </label>
            <select id="fieldNames" name="baseSym"
                    data-dojo-type="dijit/form/FilteringSelect"
                    data-dojo-props="style:'width:200px;'">
            </select>
<div data-dojo-attach-point="sourceLayerFieldSelect" class="esriCTDownloadTabTextbox" data-dojo-type="dijit/form/Select"
  data-dojo-props='required:true,trim:true,disabled:true' /div>

</div>
‍‍‍‍‍‍‍‍‍‍‍‍

Re: Registry Error in Custom Widget

KenBuja — Sun, 12 Dec 2021 10:53:03 GMT

There's an additional thing I overlooked. I think you have to add in the module 'dijit/_WidgetsInTemplateMixin' and the associated argument '_WidgetsInTemplateMixin' and declare your widget like this

return declare([BaseWidget, _WidgetsInTemplateMixin], {‍

It's recommended the BaseWidget and mixin modules are added at the beginning of the array

Re: Registry Error in Custom Widget

AbhinavSharma — Thu, 25 Jan 2018 13:46:27 GMT

I am still getting the same error

TypeError: Cannot read property 'set' of undefined ‍

I tried just calling sourceLayerFieldSelect but got a reference error, even though this is the id in the widget.html. Maybe it is not being set properly?

Re: Registry Error in Custom Widget

KenBuja — Thu, 25 Jan 2018 16:40:31 GMT

Can you zip up the widget's file and post them?

Re: Registry Error in Custom Widget

AbhinavSharma — Thu, 25 Jan 2018 16:49:46 GMT

Sure is just the widget.html and widget.js fine? I attached it below.

Re: Registry Error in Custom Widget

KenBuja — Sun, 12 Dec 2021 10:53:06 GMT

Boiling it down to its simplest, this shows how to make a Select dijit in your Widget, add items to it, and see what gets selected. You were missing a closing bracket on the div and the opening bracket in the /div in the html

Widget.html

<div>
  <div data-dojo-attach-point="sourceLayerFieldSelect" data-dojo-type="dijit/form/Select"
       data-dojo-props='required:true,trim:true,disabled:true'>
  </div>
</div>‍‍‍‍‍

Widget.js

define(['dojo/_base/declare', 'jimu/BaseWidget', 'dijit/_WidgetsInTemplateMixin', 'jimu/dijit/Message', 'dojo/on', 'dojo/_base/lang', 'dijit/form/Select'], function (declare, BaseWidget, _WidgetsInTemplateMixin, Message, on, lang) {
  return declare([BaseWidget, _WidgetsInTemplateMixin], {

    // Custom widget code goes here

    baseClass: 'testing',
    _featureLayer: null,

    postCreate: function postCreate() {
      this.inherited(arguments);
      console.log('Testing::postCreate');
      this._initDijits();
    },

    _initDijits: function _initDijits() {

      var option = [{
        value: 'Field_1',
        label: 'Field 1'
      }, {
        value: 'Field_2',
        label: 'Field 2'
      }, {
        value: 'Field_3',
        label: 'Field 3'
      }];
      this.sourceLayerFieldSelect.addOption(option);
      this.sourceLayerFieldSelect.set('disabled', false);
      this.own(on(this.sourceLayerFieldSelect, 'change', lang.hitch(this, this._onFieldSelectChange)));
    },

    _onFieldSelectChange: function _onFieldSelectChange() {
      new Message({
        titleLabel: 'Field Selected',
        message: 'Selected ' + this.sourceLayerFieldSelect.get('value')
      });
    }
  });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Registry Error in Custom Widget

AbhinavSharma — Sun, 12 Dec 2021 10:53:08 GMT

dijit.form.Select — The Dojo Toolkit - Reference Guide I decided to follow this guide (namely the select by a store one) and I think the problem is with the way my data is being created. when viewed in the chrome console my data (data) will look like the following

I created field names how i have been doing before but now am using this method to create the form:

var data = fieldNames.items;
        console.log("data", data)

        var store = new Memory({
          data: [data]
        });
        var os = new ObjectStore({objectStore: store});

        var s = new Select({
          store: os
        }, "sourceLayerFieldSelect");
        s.startup();
        console.log(s)‍‍‍‍‍‍‍‍‍‍‍‍‍

and am calling it the same as i was before in widget.html

<label for="sourceLayerFieldSelect">Render based on: </label>
<div data-dojo-attach-point="sourceLayerFieldSelect"  data-dojo-type="dijit/form/Select"
  data-dojo-props='required:true,trim:true,disabled:true' >
</div>
</div>
‍‍‍‍‍

the weird part is that now I do not get any errors the dropdown menu just does not display any values inside of my widget.

Re: Registry Error in Custom Widget

KenBuja — Sun, 12 Dec 2021 10:53:11 GMT

Instead of lines 9-12, try

this.sourceLayerFieldSelect.store(os);‍

The data array may need "value" and "label" instead of "value" and "name"