topic Re: Web AppBuilder Custom Widget - Cannot read property 'graphics' of undefined in Web AppBuilder Custom Widgets Questions

Web AppBuilder Custom Widget - Cannot read property 'graphics' of undefined

XuanKuai — Sun, 12 Dec 2021 07:12:49 GMT

I'm developing a custom widget that can select and highlight ZIP Code area on pressing the Enter key after entering the ZIP Code. But the map seems always to be undefined. The code is shown below:

onEnterKeyUp: function() { // Draw selected ZIP Code area on pressing Enter
  on(dom.byId("zip_box"), 'keyup', function(event) {
    var input = document.getElementById("zip_box").value;

    if (event.keyCode === 13) {
      event.preventDefault();

      var query = new Query();
      query.where = "ZCTA5CE10 = '" + input + "'";
      query.returnGeometry = true;

      this.layer = new FeatureLayer("path/to/layer", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"]
      });

      var borderColor = new Color([0, 255, 255]);
      var fillColor = new Color([255, 0, 0, 0.25]);
      var fillSymbol = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_SOLID,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID,
          borderColor, 2
        ),
        fillColor
      );

      this.layer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
      this.layer.on("selection-complete", lang.hitch(this, function() {
        globalFeature = this.layer.getSelectedFeatures()[0];
        globalGeometry = globalFeature.geometry;
        globalGraphic = new Graphic(globalGeometry, fillSymbol);
        console.log(globalFeature); // Could return the selected feature
        console.log(this.map); // Returns 'undefined'
        this.map.graphics.add(globalGraphic);
      }));
    }
  })
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Any help would be appreciated!

Re: Web AppBuilder Custom Widget - Cannot read property 'graphics' of undefined

RobertScheitlin__GISP — Wed, 12 Feb 2020 22:01:28 GMT

Xuan,

You need to lang.hitch this function as well.

on(dom.byId("zip_box"), 'keyup', function(event) {‍‍

Re: Web AppBuilder Custom Widget - Cannot read property 'graphics' of undefined

XuanKuai — Wed, 12 Feb 2020 22:23:39 GMT

Hey! Robert to the rescue again!

This solves the error, but somehow the shape isn't drawing even if the graphic is printed in console. Would you mind helping a little bit more with this?

I put the this.onEnterKeyUp() function inside the startup function.

Re: Web AppBuilder Custom Widget - Cannot read property 'graphics' of undefined

RobertScheitlin__GISP — Wed, 12 Feb 2020 22:32:58 GMT

Xuan,

You are not specifying the queries outSpatialReference.

https://developers.arcgis.com/javascript/3/jsapi/query-amd.html#outspatialreference

Re: Web AppBuilder Custom Widget - Cannot read property 'graphics' of undefined

XuanKuai — Thu, 13 Feb 2020 15:03:25 GMT

Thank you Robert. It works. Your answer is always surgical.

I have another functionality last time that queries layer by clicking. It doesn't seem to require query.outSpatialReference specified. Why it is needed in attribute query but not in spatial query?

Re: Web AppBuilder Custom Widget - Cannot read property 'graphics' of undefined

RobertScheitlin__GISP — Thu, 13 Feb 2020 15:43:00 GMT

Xuan,

I believe that is because the query will use the spatial reference (SR) of the input geometry or the layer you were querying was already in the map SR.