topic Re: My custom widget doesn't turn a select into a dijit, what did I miss? in Web AppBuilder Custom Widgets Questions

My custom widget doesn't turn a select into a dijit, what did I miss?

MichaelJenkins — Thu, 20 Nov 2014 00:11:14 GMT

I am trying to make my first custom widget for the WAB 3 (developer's edition). I started with the CustomWidgetTemplate, moved it to the appropriate folder and I can now see it in my app. It is a simple in panel widget with some text. So far so good. Next I want to add a Select dijit and populate it with a list of city names. I examined the DRAW widget because it uses some select dijits. I followed the HTMl and JavaScript patterns from the DRAW widget to add my Select dijit, but when I run the widget in the app, it shows as a regular HTML select and I can't treat it like a dijit. I think I have all the necessary Dojo requires. What am I missing?

My widget's HTML

<div style="float:left;height:30px;;line-height:30px;padding-left:17px;">Select City</div>

<select data-dojo-attach-point="citySelect" data-dojo-type="dijit/form/Select" style="float:right;width:50%;height:30px;"></select>

</div>

My JavaScript. In this code, I get an error if I uncomment the 'citySelect.addOption' line because it says this.citySelect is undefined. If I access this.citySelect from the console, it shows as an HTML select, not a dijit.

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

RobertScheitlin__GISP — Thu, 20 Nov 2014 02:24:23 GMT

Michael,

The issue I see in your code is here:

return declare([BaseWidget], {

And it should be:

return declare([BaseWidget, _WidgetsInTemplateMixin], {

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

MichaelJenkins — Thu, 20 Nov 2014 17:25:19 GMT

That was it, thanks a lot! For anyone else reading this, the CustomTemplateWidget provided with the WAB doesn't include that line, and it seems to me it probably should.

Robert, would you say that _WidgetsInTemplateMixin will always be needed in that return statement when building custom widgets?

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

RobertScheitlin__GISP — Thu, 20 Nov 2014 17:35:20 GMT

Michael,

Actually No. It will only be need if you are using dojo dijits in your custom widget.

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

MichaelJenkins — Thu, 20 Nov 2014 23:00:17 GMT

I found that in in the WAB documentation, so kudos to Esri for putting that in there and thanks again Robert for helping me out.

Define the template—Web AppBuilder for ArcGIS (Beta) | ArcGIS

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

MichaelJenkins — Fri, 21 Nov 2014 00:49:16 GMT

I have a related follow-up question. Do I need to do anything special or include something that I haven't in order to access the map object?

Similar to my OP, when I reference this.map I am getting the HTML element with id="map", not the esri map object.

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

RobertScheitlin__GISP — Fri, 21 Nov 2014 04:52:48 GMT

Michael,

Straight from the WAB widget development doc.

Web AppBuilder for ArcGIS is a map-centric application. It provides a map property defined in the BaseWidget class to access the map. You can access the map property through this map. The widget’s map property is a type of esri.Map from ArcGIS JavaScript API, configured in the config.json file. You can access all map features provided by ArcGIS JavaScript API. Code the widget the same as writing a regular ArcGIS JavaScript application.

When a widget instantiates, the map passes into it. As a result, you can access a map property in the postCreate or startup methods.

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

MichaelJenkins — Fri, 21 Nov 2014 18:57:33 GMT

I know, it is strange. I can get this.map to be the esri map object in all of my methods except the one that actually will use it.

I must have a syntax error or something. I will keep digging until I find it.

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

RobertScheitlin__GISP — Fri, 21 Nov 2014 19:06:21 GMT

Michael,

Is _displayCity being called before startup is executed? The map will not be a map object until startup has completed.

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

MichaelJenkins — Fri, 21 Nov 2014 19:11:52 GMT

Nope, _displayCity is not called until the user has selected from the dropdown list, which is not only well after startup, it is called right after _zoomToCity which access the map properly.

In my console screenshot above you can see the order. Whenever it shows [object object] then it is the map object. when it hits _displayCity it changes to a DIV called map.

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

RobertScheitlin__GISP — Fri, 21 Nov 2014 19:56:10 GMT

Michael,

The only thing that I can think of then is that _displayCity has a different scope and thus the keyword this has a different meaning. Are you using lang.hitch in your code that calls _displayCity function?

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

MichaelJenkins — Fri, 21 Nov 2014 20:53:13 GMT

OK, that was it. I was calling that method directly as the callback function of query.execute, but I understand now why that would make this.map our of context to the called function. Using lang.hitch instead fixed it.

I found a pretty good page that describes JavaScript variable scope and the times to use lang.hitch here:

Making Functions with hitch and partial - The Dojo Toolkit

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

RobertScheitlin__GISP — Fri, 21 Nov 2014 21:28:35 GMT

Michael,

The reason is because query execute is async and its return method has a different scope of this then the rest of the code.

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

BladimirAlamilla — Thu, 04 Jun 2015 19:15:19 GMT

Eres un genio Robert, gracias me funciono.

Re: My custom widget doesn't turn a select into a dijit, what did I miss?

RobertScheitlin__GISP — Thu, 04 Jun 2015 20:05:09 GMT

De nada.