topic Re: setRenderer error getFieldsUsedInExpressions is not a function in Web AppBuilder Custom Widgets Questions

setRenderer error getFieldsUsedInExpressions is not a function

AbhinavSharma — Sun, 12 Dec 2021 09:55:36 GMT

Hey everyone, I am attempting to create a renderer where the user is able to select the field on which to render based off of. I need to use UniqueValueDefinition as my render which means that I cannot use RendererChooser class—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers. After selecting the field the chrome console shoots back the following error

Uncaught TypeError: a.getFieldsUsedInExpressions is not a function‍

My feature layer is created like so:

var landusePolygonLayer = new FeatureLayer("https://services7.arcgis.com"),
            id: "canada_Risk",//confirm works
            mode: FeatureLayer.MODE_ONDEMAND,

            outFields: ["*"]
          });‍‍‍‍‍‍‍‍‍‍‍‍

I then call getData() after the user chooses the field ( which sets currField to that field which is used in the code below.

function getData(){
            classBreaks("#ffffcc", "#006837");
          }


          function classBreaks(c1, c2) {
            var classDef = new UniqueValueDefinition();

            //define ColorRamp
            var colorRamp = new AlgorithmicColorRamp();
            colorRamp.fromColor = new Color.fromHex(c1);
            colorRamp.toColor = new Color.fromHex(c2);
            colorRamp.algorithm = "hsv"; // options are:  "cie-lab", "hsv", "lab-lch"
            //var classField = this.get("value")
            console.log("This.get(value)", currField);//confirm the field is correct in console
            classDef.attributeField= currField;//set def field to the user selected field
            classDef.type = "classBreaksDef";


            classDef.baseSymbol = new SimpleFillSymbol("solid", null, null);
            classDef.ColorRamp = colorRamp;

            //var params = new GenerateRendererParameters();
            //params.classificationDefinition = classDef;
            console.log("here")
            this.map.getLayer("canada_Risk").setRenderer(classDef);
            console.log("here2")‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

var currField
define(
  ['dojo/_base/declare',
  "dijit/_WidgetsInTemplateMixin",
  'jimu/BaseWidget',
  "esri/toolbars/draw",
  "esri/toolbars/edit",
  "esri/graphic",
  "esri/request",
  "esri/config",
  "esri/Color",
  "esri/renderers/Renderer",
  "esri/tasks/ClassBreaksDefinition",
  "esri/tasks/UniqueValueDefinition",
  "esri/tasks/ColorRamp",
  "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",
  "esri/dijit/editing/Editor",
  "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/on",
  "dojo/data/ObjectStore",
  "dojo/store/Memory",
  "dojo/domReady!"],
  function(declare,_WidgetsInTemplateMixin, BaseWidget, Draw, Edit, Graphic, esriRequest, esriConfig, Color,Renderer,
    ClassBreaksDefinition, UniqueValueDefinition, ColorRamp, AlgorithmicColorRamp,
    GenerateRendererParameters, GenerateRendererTask, LayerDrawingOptions,
    FeatureLayer,Field,
    SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
    TemplatePicker,Editor,
    arrayUtils, event, lang, parser, registry, ItemFileReadStore, DataGrid, FilteringSelect,Select, On,ObjectStore, Memory) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: setRenderer error getFieldsUsedInExpressions is not a function

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:55:39 GMT

Abhinav,

Based on the code you posted I would say this is your issue:

          function getData(){
            lang.hitch(this, classBreaks("#ffffcc", "#006837"));
          },‍‍‍

You have a scope issue.

Re: setRenderer error getFieldsUsedInExpressions is not a function

AbhinavSharma — Mon, 29 Jan 2018 15:14:03 GMT

Hi Robert, I ended up just removing that function entirely and hard coding the colours into my colorRamp. and calling classBreaks() as soon as a new field has been chosen and the error stays the same.

Re: setRenderer error getFieldsUsedInExpressions is not a function

RobertScheitlin__GISP — Mon, 29 Jan 2018 15:18:34 GMT

Abhinav,

Can you provide more of your code?

Re: setRenderer error getFieldsUsedInExpressions is not a function

AbhinavSharma — Mon, 29 Jan 2018 15:48:08 GMT

I think I might know what my problem is, I am using setRenderer for a definition and not an actual renderer. I have to change my code so that it uses an actual renderer. Do you have any idea if there is a way for me to just use myUniqueValueDefinition?

Re: setRenderer error getFieldsUsedInExpressions is not a function

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:55:45 GMT

Abhinav,

Here is your code with a lot of corrections. I have changed it to use standard WAB/dojo widget coding practices:

define([
  'dojo/_base/declare',
  "dijit/_WidgetsInTemplateMixin",
  'jimu/BaseWidget',
  "esri/request",
  "dojo/_base/array",
  "esri/Color",
  "esri/renderers/UniqueValueRenderer",
  "esri/tasks/AlgorithmicColorRamp",
  "esri/layers/FeatureLayer",
  "esri/symbols/SimpleFillSymbol",
  "dojo/_base/lang",
  "dijit/form/FilteringSelect",
  "dijit/form/Select",
  "dojo/on",
  "dojo/data/ObjectStore",
  "dojo/store/Memory",
  "esri/tasks/GenerateRendererParameters",
  "esri/tasks/GenerateRendererTask"
],
  function(declare, _WidgetsInTemplateMixin, BaseWidget, 
    esriRequest, arrayUtils, Color,
    UniqueValueRenderer, AlgorithmicColorRamp,
    FeatureLayer, SimpleFillSymbol,
    lang, FilteringSelect, Select, On, ObjectStore, Memory,
    GenerateRendererParameters, GenerateRendererTask) {
      //To create a widget, you need to derive from BaseWidget.
      return declare([BaseWidget, _WidgetsInTemplateMixin], {

        baseClass: 'jimu-widget-ROP',
        currField: null,

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

        startup: function() {
          this.map.on("layers-add-result", initEditing);

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

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

            var store = new Memory({
              data: data.items
            });

            var os = new ObjectStore({objectStore: store});

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

            s.on("change", lang.hitch(this, function(){
              console.log("my value: ", this.get("value"))
              this.currField = this.get("value");
              lang.hitch(this, this.classBreaks(this.currField));
            }));
          }, function(err){
            console.log("failed to get field names: ", err);
          });
        },

        classBreaks: function(field){
          var generateRenderer = new GenerateRendererTask("https://services7.arcgis.cYy");
          var classDef = new UniqueValueDefinition();

          //define ColorRamp
          var colorRamp = new AlgorithmicColorRamp();
          colorRamp.fromColor = new Color.fromHex("#ffffcc");
          colorRamp.toColor = new Color.fromHex("#006837");
          colorRamp.algorithm = "hsv"; // options are:  "cie-lab", "hsv", "lab-lch"
          classDef.attributeField= field; //set def field to the user selected field
          classDef.type = "classBreaksDef";

          classDef.baseSymbol = new SimpleFillSymbol("solid", null, null);
          classDef.ColorRamp = colorRamp;

          var params = new GenerateRendererParameters();
          params.classificationDefinition = classDef; 
          
          generateRenderer.execute(params, lang.hitch(this, function(evt){
            this.map.getLayer("canada_Risk").setRenderer(evt.renderer);
          }), errorHandler);
        }
      });
    });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: setRenderer error getFieldsUsedInExpressions is not a function

AbhinavSharma — Sun, 12 Dec 2021 09:55:48 GMT

I was not able to apply all the cosmetic changes to the code due to a few blocks of code that i did not paste here breaking on me after making the changes. But i did add the bottom portion of your code (without the errorhandler) and now I do not get any errors in the chrome console but the layers do not render based off of the selected field.

edit1:

I got the error handler working and the error is

Something broke, error:  Error
    at Object.k.load (init.js:1007)
    at init.js:87
    at c (init.js:103)
    at d (init.js:103)
    at b.Deferred.resolve.callback (init.js:105)
    at c (init.js:104)
    at d (init.js:103)
    at b.Deferred.resolve.callback (init.js:105)
    at init.js:92
    at h (init.js:107)
Widget.js?wab_dv=2.7:168 error:  {"code":400,"details":["Classification has missing 'classificationField' value."],"log":false,"httpCode":400,"_ssl":true}‍‍‍‍‍‍‍‍‍‍‍‍

Re: setRenderer error getFieldsUsedInExpressions is not a function

RobertScheitlin__GISP — Mon, 29 Jan 2018 18:15:55 GMT

Abhinav,

So attached is a version of your widget using standard widget coding practices and it has been test, and works properly.

Re: setRenderer error getFieldsUsedInExpressions is not a function

AbhinavSharma — Mon, 29 Jan 2018 19:19:01 GMT

After adding my layer urls to the widget and loading the widget onto my webapp the widget does not work. it does not give me any errors it just does not render and then when I move the map a little my layer does not load. I have attached a screenshot of the symbols as shown in the chrome console.

Re: setRenderer error getFieldsUsedInExpressions is not a function

RobertScheitlin__GISP — Mon, 29 Jan 2018 19:41:42 GMT

Abhinav,

So like I said I tested this and it worked fine for me using my service url. So the next question is are you using the right symbol type? The code is setup to symbolize a Polygon feature.

Re: setRenderer error getFieldsUsedInExpressions is not a function

AbhinavSharma — Mon, 29 Jan 2018 19:45:30 GMT

Yeah i have a regular feature layer (not a dynamic layer or anything) that is a polygon feature. with full control over the polygon.

Re: setRenderer error getFieldsUsedInExpressions is not a function

RobertScheitlin__GISP — Mon, 29 Jan 2018 19:51:12 GMT

Is your layer publicly accessible? If so can you share the url for me to test?

Re: setRenderer error getFieldsUsedInExpressions is not a function

AbhinavSharma — Mon, 29 Jan 2018 20:06:53 GMT

Im sorry Robert, it isn't publiv and I am unable to make it public. only thing I can think of that could be different is the fact that it has been optimized for layer drawing in the layer settings. But I do not believe that could cause an issue.

The layer does have a lot of polygons as well. I do not know if the screenshot below will help.

Re: setRenderer error getFieldsUsedInExpressions is not a function

RobertScheitlin__GISP — Mon, 29 Jan 2018 20:17:30 GMT

Not sure what to tell you then. I have provided code that I have tested on my end to work with data I use.

Re: setRenderer error getFieldsUsedInExpressions is not a function

AbhinavSharma — Mon, 29 Jan 2018 20:20:42 GMT

Yea, you have done everything you can and ill mark the zip file comment as correct. If I am able to fix my issue I will post an update in this thread.

Thanks for all the help Robert!

Re: setRenderer error getFieldsUsedInExpressions is not a function

AbhinavSharma — Tue, 30 Jan 2018 16:41:46 GMT

I think what is happening that the renderer is not attaching the symbols to the values (hopefully I worded that correctly)

here is an example of the legend after setting the renderer.

those are the correct values for the field i have chosen but they are given a null symbol. I don't see why it would do that for my feature layer but not for your feature layer.

Re: setRenderer error getFieldsUsedInExpressions is not a function

DavidTreering2 — Fri, 02 Feb 2018 23:00:44 GMT

This is great! Maybe a new thread, but the layer is not refreshing with the new symbology until I navigate or zoom.

I'm attempting to put a legend in too, but that is off topic.

Re: setRenderer error getFieldsUsedInExpressions is not a function

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:55:51 GMT

David,

It that version I forgot to add a layer refresh (line 4):

          generateRenderer.execute(params, lang.hitch(this, function(renderer){
            console.info(renderer);
            this.map.getLayer("canada_Risk").setRenderer(renderer);
            this.map.getLayer("canada_Risk").refresh();
          }), lang.hitch(this, function(err){
            console.info(err);
          }));‍‍‍‍‍‍‍

Re: setRenderer error getFieldsUsedInExpressions is not a function

AbhinavSharma — Sun, 12 Dec 2021 09:55:42 GMT

I will post the entire section of code:

var currField
define(
  ['dojo/_base/declare',
  "dijit/_WidgetsInTemplateMixin",
  'jimu/BaseWidget',
  "esri/toolbars/draw",
  "esri/toolbars/edit",
  "esri/graphic",
  "esri/request",
  "esri/config",
  "esri/Color",
  "esri/renderers/Renderer",
  "esri/tasks/ClassBreaksDefinition",
  "esri/tasks/UniqueValueDefinition",
  "esri/tasks/ColorRamp",
  "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",
  "esri/dijit/editing/Editor",
  "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/on",
  "dojo/data/ObjectStore",
  "dojo/store/Memory",
  "dojo/domReady!"],
  function(declare,_WidgetsInTemplateMixin, BaseWidget, Draw, Edit, Graphic, esriRequest, esriConfig, Color,Renderer,
    ClassBreaksDefinition, UniqueValueDefinition, ColorRamp, AlgorithmicColorRamp,
    GenerateRendererParameters, GenerateRendererTask, LayerDrawingOptions,
    FeatureLayer,Field,
    SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
    TemplatePicker,Editor,
    arrayUtils, event, lang, parser, registry, ItemFileReadStore, DataGrid, FilteringSelect,Select, On,ObjectStore, Memory) {
      //To create a widget, you need to derive from BaseWidget.
      return declare([BaseWidget,_WidgetsInTemplateMixin], {
        // 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.cYy", {
            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//0",
            content:{
              f: "json"
            },
            callbackParamName : "callback"
          });
          console.log("fields", canadaFields)
          var fieldNames, fieldStore;
          canadaFields.then(function(resp){

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


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

            var store = new Memory({
              data: data.items
            });

            var os = new ObjectStore({objectStore: store});
            //console.log("dsds",os)

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

            s.on("change", function(){
              //lang.hitch(this, this.get("value"));
              console.log("my value: ", this.get("value"))
              currField = this.get("value");
              classBreaks(currField)
            })


          }, function(err){
            console.log("failed to get field names: ", err);

          });


          function classBreaks(field) {
            var classDef = new UniqueValueDefinition();

            //define ColorRamp
            var colorRamp = new AlgorithmicColorRamp();
            colorRamp.fromColor = new Color.fromHex("#ffffcc");
            colorRamp.toColor = new Color.fromHex("#006837");
            colorRamp.algorithm = "hsv"; // options are:  "cie-lab", "hsv", "lab-lch"
            //var classField = this.get("value")
            console.log("This.get(value)", field);//confirm the field is correct in console
            classDef.attributeField= field;//set def field to the user selected field
            classDef.type = "classBreaksDef";


            classDef.baseSymbol = new SimpleFillSymbol("solid", null, null);
            classDef.ColorRamp = colorRamp;

            //var params = new GenerateRendererParameters();
            //params.classificationDefinition = classDef;
            //console.log("here")
            console.log("riskCanada",this.map.getLayer("canada_Risk"))
            this.map.getLayer("canada_Risk").setRenderer(classDef);
            console.log("here2")
            //var generateRenderer = new GenerateRendererTask("https://services7.arcgis.com/0");
            //generateRenderer.execute(params, applyRenderer, errorHandler);
          }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: setRenderer error getFieldsUsedInExpressions is not a function

KisakyeM — Sat, 12 Mar 2022 02:18:06 GMT

I too downloaded @RobertScheitlin__GISP 's attached widget code and my results are similar to yours. The values for the field are shown but the symbols are not.