topic One widget hijacking another in Web AppBuilder Custom Widgets Questions

One widget hijacking another

JustinBridwell2 — Wed, 08 Apr 2020 17:37:36 GMT

I have 2 widgets: a Manage Folders widget and a Task Manager widget. They sit next to each other in the navbar of my Web AppBuilder version 1.2 app. There are several other widgets as well. If I launch Task Manager after any of the other widgets, there are no problems. However, if I launch the Manage Folders Widget, close it, and then open the Task Manager widget, I immediately notice that a dropdown is sized a little larger than normal. The dropdown controls what task items are displayed in a grid below it. Normally, if I select a new item from the dropdown, it triggers and on change event that loads the tasks for the new selection into the grid. Now however, when I select a new item from the dropdown, nothing happens; the items from the previous selection (or default) remain the same.In investigating this issue in Chrome DevTools, I noticed that when I make a change in the Task Managers dropdown, the on change event gets triggered but then it goes to the 'loadData' function in the widget.js file for the previously closed Manager Folders widget. Note: they both have a function called 'loadData'. How could this be?! Any suggestions (other than renaming one of the loadData functions? Why would this be happening? Could this be something set incorrectly in one of the .json files?

Re: One widget hijacking another

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:10:38 GMT

Justin,

It sounds like you are firing a publishData event on your widget and are not specifying that this data does not have a property like name or id so that you can distinguish which other widget should or should not listen for this data.

In my eSearch widget I have a onReceiveData function like this. As you can see in line 5 I check if the data.target equals eSearch.

      onReceiveData: function(name, widgetId, data) {
        if(data.message && data.message === "Deactivate_DrawTool"){
          this.drawBox.deactivate();
        }
        if(data && data.target && data.target === 'eSearch'){
          if(data.feature.geometry.type === "polygon"){
            esriConfig.defaults.geometryService.labelPoints([data.feature.geometry], lang.hitch(this, function(labelPoint) {
              this.search(labelPoint[0], 0);
            }));
          }else{
            this.search(data.feature.geometry, 0);
          }
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍

As far as the sizes being larger... It sounds like you have defined some custom css rule that does not have a high enough specificity, meaning it is being applied to all other widgets too.

Re: One widget hijacking another

JustinBridwell2 — Wed, 08 Apr 2020 21:11:06 GMT

Hey Robert- So, I'm trying to figure out where to apply your suggestion. The Task Manager on change events fires and then it calls `thisWidget.loadData()` like this:

dijit.byId('subprojectSelect').on('change', function (e) {
thisWidget.loadData(e, proj_type_obj);
});

At this point I expect it to to the Task Manager "loadData()" function but it instead goes to the Manage Folder "loadData" function. Here is the start of the Task Manager:

loadDataTM: function (e, proj_typ) {
var p_type = proj_typ;
var proj = e;
console.log('loadData Task Manager');
var dyfields = [{ type: "control", width: 40 },
{ name: widgetConfig.taskTrackingTable.taskName, title: "Task Name", type: "text", width: 120, validate: "required" },
...
];
var def = new Deferred();
this.getTempPortal();
...
}

And here is the Manage Folders loadData function, which is also called with "thisWidget.loadData();":

onOpen: function () {
console.log('onOpen');
this.loadData();
},
loadData: function () {
var def = new Deferred();
this.getTempPortal();
....
var projectNames = [];
var strProjectNames = "";
....
}

Note: Task Manager doesn't call "thisWidget.loadData();" in the onOpen() function while Manage Folders does. So how could I apply your suggestions here. Would I use something unique to Task Manager widget like

this.dijit.byId("subprojectSelect")

? Would I use this unique identifier in the on change event or inside the loadData function?

Re: One widget hijacking another

JustinBridwell2 — Thu, 09 Apr 2020 15:00:08 GMT

I was able to resolve the css issue, but am still not able to get the main issue resolved. What seems to be happening is that the "thisWidget" variable is still assigned to "ManageFolders" so that when I call:

dijit.byId('subprojectSelect').on('change', function (e) {
thisWidget.loadData(e, proj_type_obj);
});

in TaskManager, it is going to the "loadData" function in ManageFolders. How can I kill the ManageFolder "thisWidget" and make sure that it is assigned to TaskManager instead?

Re: One widget hijacking another

RobertScheitlin__GISP — Tue, 14 Apr 2020 12:56:35 GMT

Justin,

I am having difficulty following you widget logic.

Where and what is the var thisWidget set to?

Re: One widget hijacking another

JustinBridwell2 — Wed, 15 Apr 2020 13:25:41 GMT

Hey Robert,

Sorry for the delay in responding. Yes, the problem was totally caused by the variable `thisWidget`. Both widgets used `thisWidget` and they were both set to `thisWidget = this;` in `startup ()`, but ManageFolders widget also had it set to `thisWidget = this;` in the `onOpen()` function while TaskManager did not. After much trial and error, I finally was able to resolve this with one line of code by adding `thisWidget = this;` to the `onOpen` function in TaskManager.