Unable to work with the map object (this.map) in javascript

[TylerJones3]

I have created a small query widget for ESRI's web app builder. However, I cannot get access the this.map object. When inspected in Chrome, it appears I'm getting some other object in the map's place instead. What am I doing wrong here, and how do I obtain the this.map object correctly?

The error occurs on the line where this.map.setextent occurs and the error is:

this.map.setExtent is not a function

Any attempt to work with this.map results in a similar error. I have tried comparing my code against the pre-existing ESRI widgets in the web app builder and I am not seeing any differences that would lead to this error.

define([
'dojo/_base/declare',
'dojo/_base/lang',
'dojo/_base/query',
'dojo/_base/html',
'dojo/_base/array',
'dojo/_base/fx',
'dojo/promise/all',
'dojo/Deferred',
'esri/map',
'esri/graphic',
'esri/graphicsUtils',
'dojo/on',
'jimu/BaseWidget',
'dojo/dom',
'esri/tasks/query',
'esri/tasks/QueryTask',
'esri/layers/FeatureLayer',
'jimu/MapManager',

'esri/geometry/Extent',
'esri/Color',
'esri/symbols/SimpleMarkerSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/symbols/SimpleFillSymbol'
   
],
function(declare, lang, query, html, array, fx, all, Deferred, Map, Graphic, graphicsUtils, on,  BaseWidget, dom, Query, QueryTask,  FeatureLayer, MapManager,  Extent, Color, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) { //a
  
  //To create a widget, you need to derive from BaseWidget.
  return declare([BaseWidget], { 
    // Custom widget code goes here
   
    baseClass: 'jimu-widget-nessearch',
    name: 'Search',
    
   startup: function() { 

      console.log('startup');
   }, 
  
   _onPointBtnClicked: function(){ //d
    //var layer
    var query = new Query();
    query.returnGeometry = true;
    switch (dom.byId("SelectType").selectedIndex) { //e
      case 0:
        var featurelayer = <Layer 0>);
        query.outFields = ["POLE_NO", "PNO"];
        query.where = "UPPER(POLE_NO) LIKE UPPER('%" + dom.byId("SearchValue").value + "%')";
        featurelayer.queryFeatures(query, function(result){  
        alert(this.map.id); //returns an id of "map"
        //Problem Line:
        this.map.setExtent(graphicsUtils.graphicsExtent(result.features), true);  //fails here
        var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1.5),        new Color([255, 0, 0, 0.5]));
        var polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new                   Color([255, 0, 0, 0.5]));
     
        });  
        break;
                                } 
    
    return;
    
  } 
    

  
  }); 
}); 

[thejuskambi]

You seem to be overriding the statup function without calling the this.inherited(arguments). Try adding it and let me if it works.

[TylerJones3]

I un-commented the line in the startup function and the problem persists.

[TylerJones3]

This is very confusing. When checking the this and this.map object in other widgets using Chrome's debugger, I see an entirely different "this" object for ESRI's widgets versus my own. I've attached snapshots of each. My this object does not resemble ESRI's in any way. My widget though is directly from an example of ESRI's. How am I failing to get the right one?

Mine:

[PrevinWong1 · Accepted solution]

I see that you are trying to access the this.map from a callback.  You have to put the right scope on the callback using lang.hitch, such as

featurelayer.queryFeatures(query, lang.hitch(this,function(result){...

That way, you maintain the scope of the widget.

Also, if (_onPointBtnClicked)

is perfomed from a button on the UI, you might to add the lang.hitch as well to the registered button's on event.