topic Re: Using a value from one widget as a parameter for another in Web AppBuilder Custom Widgets Questions

Using a value from one widget as a parameter for another

JustinBridwell2 — Sun, 12 Dec 2021 10:13:49 GMT

I want to use a value from one widget as a parameter to open another widget I currently have a widget, 'InfoTemplate' (a popup) that has a button that launches another widget, `TaskManager`, when clicked:

var editButton = new Button({     label: "Edit Schedule" }); editButton.on('click', lang.hitch(this, function () {     editButton.setDisabled(true); //disable the edit button on first click     var wm = WidgetManager.getInstance();     var tm = wm.appConfig.widgetPool.widgets[8]; //TaskManager widget     var hc = WidgetManager.getInstance().getWidgetsByName("HeaderController")[0];     hc.setOpenedIds([tm.id]);     editButton.setDisabled(false); }));  editButton.startup();

The task manager widget has two dropdowns, which onOpen, populate with a default list of items from a REST Service 
(Project Name, and Subproject Name are the 2 dropdowns/attribute fields that get populated). In the `InfoTemplate` widget, 
I am able to get the `Subproject Name` value of the feature being clicked on and create a variable that can be plugged into
my button's `.on('click' function):

      var subproj = updateFeatureOriginal.attributes.projectname;

I have a function in my TaskManager widget that gets the list of subproject names, but more importantly, has an onChange event 
handler that loads tasks in a table by subproject:
function createSubprojectDropdown(items) {
 // Create subprojects dropdown
     var subprojectNode = dom.byId("subprojectDropdown");
     if (items.length >= 1) {
         var subprojectsOptions = items.map(subproject => {
         return { "label": subproject, "value": subproject }
         });
     }
     else {
         let current_user = parent.thisWidget.getCurrentUser();
         var subprojectsOptions = [{ "label": `No subprojects available to user "${current_user}"`, "value": "NoSubprojects" }]
     }
     // Must check to see if subprojectSelect exists. If it does, destroy that node and create a new one (otherwise you get a registry error)
     var p = registry.byId('subprojectSelect');
     if (p) {
         p.destroyRecursive();
     }
     var subprojectSelector = new Select({
         name: "subprojectSelect",
         id: "subprojectSelect",
         options: subprojectsOptions
     }).placeAt(subprojectNode).startup();

     dijit.byId('subprojectSelect').on('change', function (e) {
         thisWidget.loadData(e, proj_type_obj);
     });
     thisWidget.loadData();
}
   
To do this, I have it calls another function in my TaskManager widget that takes a parameter and populates the table with tasks accordingly (its too long to 
paste here): 
loadData: function (subproj_name, proj_typ) {....};

The proj_type is determined by the subproj_name and not of concern here. Basically, what I want to do is take the 
subproj variable from InfoTemplate (which will be open) and use it to preselect the subproject name from the 
dropdown in using my onChange event in the createSubprojectDropdown function. My initial idea is to simple add 
something to check and see if there is a subproject value from InfoTemplate, and if so, send that to the loadData 
function.
var subproj_name = updateFeatureOriginal.attributes.projectname;
if (subproj_name != undefined) {
    thisWidget.loadData(subproj_name, proj_type_obj);
};

Is there an easier way to do this? Should I be using `FeatureAction` or some other methodology?

Re: Using a value from one widget as a parameter for another

RobertScheitlin__GISP — Tue, 24 Mar 2020 17:21:31 GMT

Justin,

So normally the way that I do this is to call a function in the receiving widget. Then you open the widget from another widget you get a reference to that newly opened widget and then you can use that var (i.e. TMWidget) and dot then function or property name.

Re: Using a value from one widget as a parameter for another

JustinBridwell2 — Thu, 02 Apr 2020 14:54:57 GMT

Hey Robert - The trick here was to make the variable coming from the 'calling' widget global, then assign the value as another variable in the 'recieving' widget and kill the original global variable (set it to null anyway).

At the top of my InfoTemplate (the 'call' widget) script, just inside my declare for my BaseWidget, I added a global variable called 'taskManagerOriginalValue':

var clazz = declare([BaseWidget, PoolControllerMixin], {

name: 'CustomInfoTemplate',

updateFeature: {},
updateFeatureOriginal: null,
taskManagerOriginalValue: null,

....//rest of code

I give it a value later in the script in my button's onClick event and the value persists when the second widget, Task Manager.

editButton.on('click', lang.hitch(this, function () {
editButton.setDisabled(true); //disable the edit button on first click
var wm = WidgetManager.getInstance();
taskManagerOriginalValue = updateFeatureOriginal.attributes.projectname;

.....

Then I initialize it's instance in my 'onOpen' function and assign it to another variable in the Task Manager widget and kill the original:

onOpen: function () {
console.log('onOpen');
this.taskManagerOriginalValue;

....

if (typeof taskManagerOriginalValue !== 'undefined') {
subproj_name = taskManagerOriginalValue; // Assign it to a new variable
taskManagerOriginalValue = null; //Kill it

So far, this seems to be working.