topic Re: Custom widget variable scope in Web AppBuilder Custom Widgets Questions

Custom widget variable scope

NartTamash — Mon, 18 Apr 2016 13:08:37 GMT

Hi all,

Not a seasoned developer, so this might have a very simple answer that I'm failing to see/understand.

I'm trying to build a custom widget from scratch, and most of my code gets executed when a button is clicked in the widget interface (it's a portal map services search). I am using a global variable that needs to be manipulated at various stages (i.e. events). To keep this as short as possible my code looks something like this:

...
addedLayers: [], //This is the global variable
postCreate: ...
startup: ...
customFunctionOnButtOnclick: function() {
map = this.map;
var addedLayers = this.addedLayers;
...
       on(map, "layer-remove", function(event) {
            //do something to addedLayers
       });

       on(map, "layer-add", function(event) {
            //do something else to addedLayers
       });
},
...

Is there a reason why addedLayers can be accessed in the layer-add event but not in the layer-remove event?

I obviously only included the relevant parts of that main function. There are other bits that do different things, but none of which should affect addedLayers. Also the two map events, are in the same succession as presented here.

Re: Custom widget variable scope

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:45:58 GMT

Nart,

Sure, it is a scoping issue as you have stated already. Each time you an event handler using dojo/on the scope of the handling function changes and you need to use lang.hitch to maintain the scope.

Add "dojo/_base/lang" require

customFunctionOnButtOnclick: function() {
  map = this.map;
  var addedLayers = this.addedLayers;
  ...
  on(map, "layer-remove", lang.hitch(this, function(event) {
     //do something to addedLayers
  }));
       
  on(map, "layer-add", lang.hitch(this, function(event) {
    //do something else to addedLayers
  }));
},

Re: Custom widget variable scope

NartTamash — Mon, 18 Apr 2016 15:47:30 GMT

Thanks Robert! This partially worked however. Interestingly, inside the layer-remove event (after layer-add has been fired once), I could access this.addedLayers, but not the variable I declared previously (i.e. var addedLayers = this.addedLayers). Why is that?

Another question...if I declare the local variable 'addedLayers' without the 'var' (i.e. addedLayers = this.addedLayers), and without using lang.hitch, the variable is accessible in both events, as is the local map variable (also declared without a var).

How does this work (both the scope and declaring variables without the 'var')? If it's too much, I'd also be happy if you could point me to a good resource that explains it.

Re: Custom widget variable scope

RobertScheitlin__GISP — Mon, 18 Apr 2016 16:50:22 GMT

Nart,

Using a the var makes a variable a local variable and not using var make the variable a global variable (this is not a good thing per-say).

...
addedLayers: [], //This is the global variable
postCreate: ...
startup: ...

above addedLayer is now a psuedo-global var that can be access using "this.addedLayer"

In WAB widget development if you want a var to be accessible in any function in the widget then you use addedLayers:[], like you have following the "return declare([BaseWidget, _WidgetsInTemplateMixin], {" line. And you access it using this.addedLayers but the function or arrays function loop has to maintain the same scope using lang.hitch.

There is absolutely no need to create a var for the map as all widgets have access to "this.map"

I am not sure why you are having problem accessing "this.addedLayers" array in the on "layer-remove" if the function is preceded by lang.hitch.

on(this.map, "layer-remove", lang.hitch(this, function(event) {

//do something to addedLayers

console.info(this.addedLayers);

}));

Re: Custom widget variable scope

NartTamash — Tue, 19 Apr 2016 05:39:14 GMT

Sorry, I might not have been very clear...I was refering to the 'addedLayers' declared with a 'var' inside the 'customFunctionOnButtonClick' section as described in the first post, not the one declare before startup, postcreate, etc.

Re: Custom widget variable scope

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:46:01 GMT

Nart,

OK I am probably missing your question then. So here is a bit of advice.

Do not name your local vars and global vars the same. Because you do have them named the same it will get really confusing as to which one you are getting by using "this."

customFunctionOnButtOnclick: function() {
    //You don't need these next two lines as you can access the global versions of them by using "this."
    map = this.map;
    var addedLayers = this.addedLayers;
...
      on(map, "layer-remove", lang.hitch(this, function(event) {
            //do something to addedLayers
      }));
     
      on(map, "layer-add", lang.hitch(this, function(event) {
            //do something else to addedLayers
      }));
},