topic Re: Launching one widget from a button inside another widget in Web AppBuilder Custom Widgets Questions

Launching one widget from a button inside another widget

JustinBridwell2 — Sun, 12 Dec 2021 11:03:16 GMT

Suppose I have created a button inside a custom InfoTemplate (aka 'popup') widget in my Web AppBuilder app:

 var editButton = new Button({     
     label: "Edit Schedule",
     onClick: function () {
         editButton.setDisabled(true); //disable the edit button on first click
     } }); 
 editButton.startup();

What I want is to launch another widget called 'TaskManager' when the onClick event is triggered. It seems like I need to use a library class called WidgetManager but I can find any practical example for my scenario. It seems like I need to use something like this:

 openWidget(widget)

The openWidget method requires the Widget ID, which I am having trouble locating in my app (I know the name is TaskManager from the manifest.json file but can't find the id attribute). I've also seen example where a function is created, I assume inside the InfoTemplate widget, that will point to the TaskManager widget and can be called inside the click event:

   _openTaskManager: function () {
       var taskManager, sbc;
       var widgetCfg = this._getWidgetConfig('CustomInfoTemplate');
       if (widgetCfg) {
           sbc = WidgetManager.getInstance().getWidgetsByName('TaskManager')[0];
           sbc._resizeToMax();
           sbc.setOpenedIds([widgetCfg.id]);
       }
  },

then => _openTaskManager();

Am I on the right track? Is there an easy way to do this or am I way off? Any suggestions?

Re: Launching one widget from a button inside another widget

RobertScheitlin__GISP — Tue, 17 Mar 2020 17:49:58 GMT

Justin,

Take a look at this thread.

https://community.esri.com/thread/185172-open-another-widget-from-a-custom-widget-link

Re: Launching one widget from a button inside another widget

JustinBridwell2 — Tue, 17 Mar 2020 18:03:45 GMT

Are you suggesting I use 'Create a feature action' in my custom `InfoTemplate` popup widget? Also, where do I find the widget id? Would it just be 'TaskManager'?

Second question: From the feature action documentation it looks like I could use widget manager to get an instance and open the `TaskManager` widget:

`WidgetManager.getInstance().triggerWidgetOpen(this.widgetId)`

However, I am still confused about how to use the widgetId. Like this?

`WidgetManager.getInstance().triggerWidgetOpen(this.TaskManager)`

Re: Launching one widget from a button inside another widget

RobertScheitlin__GISP — Tue, 17 Mar 2020 19:10:14 GMT

Justin,

If a custom feature action is added from a custom widget then "this.widgetId" is the id of your custom widget.

To trigger opening a widget you should follow the example that I recommenced in that thread (i.e. the ViewInAttributeTableFeatureAction.js). In there you will see that the onExecute function will trigger the AT widget to be opened.

widgetManager.triggerWidgetOpen(this.widgetId)

.then(function(attrWidget) {

...

Re: Launching one widget from a button inside another widget

JustinBridwell2 — Wed, 18 Mar 2020 21:03:21 GMT

Robert,

So using the feature action example, would I add the the showTaskManagerFeatureAction.js file under the widget>InfoTemplate folder (on the same level as widget.js) or under the TaskManager folder? And then add a function to launch TaskManager inside the TaskManager>widget.js file or the InfoTemplate>widget.js file? The example with showVertexCount uses popupMenu and it never explains what code to add to that (it's not a widget, just a part of the jimu or dijit library right?). It kinda confusing trying to apply that case to mine because I really don't want to do anything other than use a button to open the TaskManager widget (not dependent on any features).

Re: Launching one widget from a button inside another widget

RobertScheitlin__GISP — Thu, 19 Mar 2020 12:50:41 GMT

Justin,

Several question before I can answer your questions.

Is the widget you are attempting to open "TaskManager" from the popup opened at app startup?
If 1 is no then is InfoTemplate your reference above a widget? And is it opened at app startup?
You say you just want a button to open a widget not dependent on any feature. So you mean no matter what feature is clicked on the map you wish to have a button that will open your widget?

Re: Launching one widget from a button inside another widget

JustinBridwell2 — Thu, 19 Mar 2020 14:34:00 GMT

1. When the app starts up, it does not appear that the Task Manager widget is "opened." You only see the widget icon on the navbar and the use must click it before it triggers the "onOpen" function in TaskManager that opens it.

2. Not sure what you mean by "is InfoTemplate your reference above a widget." The InfoTemplate widget, unlike the popupMenu used in the Feature Action tutorial example, has it's own folder in the "widgets" directory. It also does not appear as opened when the app is first launched, none of the widgets are. The user must physically click on a layer to launch the InfoTemplate and open the contentPane.

3. Originally, yes, I simply wanted a button in the InfoTemplate that would do nothing more than open the TaskManager widget. However, if you look at the above picture of the InfoTemplate widget open, with the Edit Schedule button (this is the button I made to launch TaskManager), you will see that there is a form. This form is created from the attributes table of the feature being clicked. One of those attributes is "Project Name." Eventually what I want to do is not only open the TaskManager widget, but grab that project name and use it as a parameter to open the Task Manager and preselect a subproject using that "project" name. But for now, just getting the Task Manager to open no matter what feature is selected would be fine.

Re: Launching one widget from a button inside another widget

RobertScheitlin__GISP — Thu, 19 Mar 2020 14:51:20 GMT

Justin,

OK there is no OTB widget called infoTemplate so that must be a custom widget on your end. So in your work scenario the user should be able to open the app and click on any feature and see a button in the popup that would open the TaskManager widget. It sounds like really your goal is to have then click on a certain layer that has a "Project Name" field and only that layer will get this button. If that is the case then that is where we should start and not start with some general code that adds the button to any features popup.

So all the questions about if either of those widgets will be opened first in your workflow before the button is added to the popup is critical for me to know which coding path I will be advising you on. If one of them if a first step (i.e. opening that widget doing something then clicking on a feature) then that is one path vs. No neither has to be open, the button should appear immediately when the app starts, then that is whole other code path.

Re: Launching one widget from a button inside another widget

JustinBridwell2 — Thu, 19 Mar 2020 15:25:57 GMT

Yes, InfoTemplate is a custom widget that is essentially a popup that is launched when the user clicks a feature. I have added a button called "Edit Schedule" with an onClick event inside the InfoTemplate widget.js. That button (specifically the onClick event) is what I want to launch TaskManager (Task Manager can also be opened by simply clicking the TaskManager icon on the top navbar). So my workflow would be 1) User clicks on a feature and the InfoTemplate popup is opened. 2) At the bottom of the 'Detail' tab in InfoTemplate, the user will then click on the "Edit Schedule" to open the TaskManager widget. 3) The Task Manager widget opens. It doesn't matter if the both widgets remain open or not, as long as the TaskManager widget is open. 4) Final goal is to have the TaskManager widget also have the project and subproject populated based on the feature attribute called "Project Name" that appears in the form under the Detail tab in the InfoTemplate popup.

Re: Launching one widget from a button inside another widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:03:18 GMT

Justin,

OK, this is a lot simpler then I thought then. Since the popup you are referring to is actually a custom widget then you just need the onClick code to open your task manager widget.

Step 1.

//Add the WidgetManager and lang modules to your widgets define array.
define([
    'dojo/_base/declare',
    ...
    'dojo/_base/lang',
    'jimu/WidgetManager',
...
], function(
    declare, ..., lang, WidgetManager, ...
) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Step 2.

var editButton = new Button({     
  label: "Edit Schedule",
  onClick: lang.hitch(this, function () {
    editButton.setDisabled(true); //disable the edit button on first click
    WidgetManager.getInstance().triggerWidgetOpen("the id of your widget in the apps main config.json")
      .then(function(tmWidget) {
         //now you have a refernce to the Task Manager widget using tmWidget var
      });
  });
}); 
editButton.startup();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Launching one widget from a button inside another widget

JustinBridwell2 — Thu, 19 Mar 2020 16:47:41 GMT

Yes, yes this is what I am looking for! 2 quick questions then: 1) Where does the `tmWidget` variable get defined? in the .then(tmWidget) part? Is this like an output variable? 2) My main config.json that defines widgets looks like this for Task Manager:

{
"uri": "widgets/TaskManager/Widget",
"version": "1.2",
"id": "widgets/TaskManager/Widget_26",
"name": "TaskManager",
"label": "Task Manager",
"index": 11,
"config": "configs/PEPCO/TaskManager/config_TaskManager_buzzardPoint.json",
"position": {
"width": 600
}
},

Under "widgets", it is the 9th widget (index 8, assuming it starts with 0). How would I apply that to this:

WidgetManager.getInstance().triggerWidgetOpen("the id of your widget in the apps main config.json")

I would assume either WidgetManager.getInstance().triggerWidgetOpen("Widget_26");

WidgetManager.getInstance().triggerWidgetOpen(('TaskManager')[8]);

Am I on the right track there? -JB

Re: Launching one widget from a button inside another widget

RobertScheitlin__GISP — Thu, 19 Mar 2020 17:28:36 GMT

Justin,

1. Yes the .then part.

2. It is the whole id "widgets/TaskManager/Widget_26"

Re: Launching one widget from a button inside another widget

JustinBridwell2 — Thu, 19 Mar 2020 18:00:31 GMT

Argghh! Getting the following error:

Why would that be?!

Re: Launching one widget from a button inside another widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:03:21 GMT

Justin,

Lets change this code to how I would normally have it then.

      var editButton = new Button({
        label: "Edit Schedule"
      });
      editButton.on('click', lang.hitch(this, function () {
        editButton.setDisabled(true); //disable the edit button on first click
        WidgetManager.getInstance().triggerWidgetOpen("the id of your widget in the apps main config.json")
          .then(lang.hitch(this, function (tmWidget) {
            //now you have a refernce to the Task Manager widget using tmWidget var
          }));
      }));
      editButton.startup();‍‍‍‍‍‍‍‍‍‍‍

Re: Launching one widget from a button inside another widget

JustinBridwell2 — Thu, 19 Mar 2020 18:44:04 GMT

Robert - So close, but I am still getting the same error:

editButton.startup();

>>>Uncaught TypeError: WidgetManager.getInstance().triggerWidgetOpen(...) is not a function.

Could this be a scope error or am I using the wrong parameter here ("widgets/TaskManager/Widget_26")?

Re: Launching one widget from a button inside another widget

RobertScheitlin__GISP — Thu, 19 Mar 2020 18:52:34 GMT

Justin,

It is a issue with the WidgetManager module in your define array most likely. Do you now about matching your module sequence and vars to match?

Re: Launching one widget from a button inside another widget

JustinBridwell2 — Thu, 19 Mar 2020 19:00:32 GMT

Here's how I have it defined; do you see a problem here?:

define([
//dojo AMD modules

...

//esri AMD modules
...

//jimu web appbuilder AMD modules
'jimu/BaseWidget',
'jimu/utils',
'jimu/portalUtils',
'jimu/dijit/Message',
'jimu/MapManager',
'jimu/tokenUtils',
'jimu/portalUtils',
'jimu/LayerInfos/LayerInfos',
'jimu/PoolControllerMixin',
'jimu/WidgetManager'

],
function (
//dojo AMD modules
...

//esri AMD modules
...//jimu web appbuilder AMD modules
BaseWidget,
utils,
PortalUtils,
Message,
MapManager,
tokenUtils,
portalUtils,
LayerInfos,
PoolControllerMixin,
WidgetManager

) {

// My code...

Re: Launching one widget from a button inside another widget

RobertScheitlin__GISP — Thu, 19 Mar 2020 19:10:02 GMT

Justin,

What version of WAB are you targeting?

Re: Launching one widget from a button inside another widget

JustinBridwell2 — Thu, 19 Mar 2020 20:36:03 GMT

1.2, I believe. BTW -When I go to the documentation for WidgetManger, there is no `.triggerWidgetOpen' method, only an `.openWidget(widget)` method. In the console when I am debugging, I was able to use

var wm = WidgetManager.getInstance();

var tm = wm.appConfig.widgetPool.widgets[8];

to find the TaskManager widget:

>uri: "widgets/TaskManager/Widget", version: "1.2", id: "widgets/TaskManager/Widget_26", name: "TaskManager", label: "Task Manager", …}

I then tried using this to open the TaskManager widget, but nothing happens:

wm.openWidget(tm);

Re: Launching one widget from a button inside another widget

RobertScheitlin__GISP — Thu, 19 Mar 2020 22:43:46 GMT

Justin,

That would be an extremely old version then as we are at 2.15 in WAB Dev. One easy way to check is open the developer tools and in the console type "wabVersion"

Change your code to wm.openWidget(tm.id);