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

[XuanKuai]

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!

[RobertScheitlin__GISP · Accepted solution]

Xuan,

   You need to lang.hitch this function as well.

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

[XuanKuai]

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.

[RobertScheitlin__GISP]

Xuan,

   You are not specifying the queries outSpatialReference.

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

[XuanKuai]

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?

[RobertScheitlin__GISP]

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.