Accessing Map from Widget code

Question

I'm likely making a stupid mistake but right now I'm not seeing it. I'm getting my feet wet with WAB Developer Edition 2.8 and I'm making a simple widget (based on demo widget template in the samplewidgets folder). In my widget, the user specifies a township/range/section and the map zooms to that location. Here's the widget: Simple stuff. My code works up to the point of updating the map extent. I get an error that the "Object doesn't support property or method 'setExtent'". From my search, I feel like I'm referencing the map the right way but clearly I'm not. What am I missing? There's not much to it but here's my widget.js code: define(['dojo/_base/declare', 'dojo/dom', 'dojo/on', 'esri/tasks/query', 'esri/tasks/QueryTask', 'jimu/BaseWidget'], function(declare, dom, on, Query, QueryTask, BaseWidget) { //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-demo', postCreate: function() { this.inherited(arguments); //console.log('postCreate'); }, startup: function() { this.inherited(arguments); this.mapIdNode.innerHTML = 'map id:' + this.map.id; on(dom.byId("zoomButton"), "click", function() { var queryString = "Township=" + dom.byId('townshipNum').value + " AND TWP_CHAR='" + dom.byId('townshipDir').value + "' AND RANGE=" + dom.byId('rangeNum').value; queryString = queryString + " AND RNG_CHAR='" +dom.byId('rangeDir').value + "' AND SECTION=" + dom.byId('sectionNum').value; var query = new Query(); query.returnGeometry = true; query.where = queryString; var qTask = new QueryTask("https://navigator.state.or.us/arcgis/rest/services/Framework/Cadastral_PLSS_WM/MapServer/3"); qTask.execute(query, function(results) { if (results.features.length != 1) { alert('There was an issue zooming into your Township/Range/Section.'); } else { var plssGeom = results.features[0].geometry; this.map.setExtent(plssGeom.getExtent()); } }); }); }, onOpen: function(){ //console.log('onOpen'); }, onClose: function(){ //console.log('onClose'); }, onMinimize: function(){ //console.log('onMinimize'); }, onMaximize: function(){ //console.log('onMaximize'); } }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ The error happens on line 35 in my code above. Should my code be in a different event function instead of startup? Thanks! Steve

rscheitlin · Accepted Answer

Steve, The scope of “this” inside of your query task function is different from the scope outside of that function. To maintain the scope you must use lang.hitch or a closure. startup: function() { this.inherited(arguments); this.mapIdNode.innerHTML = 'map id:' + this.map.id; on(dom.byId("zoomButton"), "click", lang.hitch(this, function() { var queryString = "Township=" + dom.byId('townshipNum').value + " AND TWP_CHAR='" + dom.byId('townshipDir').value + "' AND RANGE=" + dom.byId('rangeNum').value; queryString = queryString + " AND RNG_CHAR='" +dom.byId('rangeDir').value + "' AND SECTION=" + dom.byId('sectionNum').value; var query = new Query(); query.returnGeometry = true; query.where = queryString; var qTask = new QueryTask("https://navigator.state.or.us/arcgis/rest/services/Framework/Cadastral_PLSS_WM/MapServer/3"); qTask.execute(query, lang.hitch(this, function(results) { if (results.features.length != 1) { alert('There was an issue zooming into your Township/Range/Section.'); } else { var plssGeom = results.features[0].geometry; this.map.setExtent(plssGeom.getExtent()); } })); })); },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍