Launching one widget from a button inside another widget

[JustinBridwell2]

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?

[RobertScheitlin__GISP]

Justin,

   Take a look at this thread.

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

[JustinBridwell2]

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)`

[RobertScheitlin__GISP]

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) {

...

[JustinBridwell2]

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). 

[RobertScheitlin__GISP]

Justin,

   Several question before I can answer your questions.

1. Is the widget you are attempting to open "TaskManager" from the popup opened at app startup?
2. If 1 is no then is InfoTemplate your reference above a widget? And is it opened at app startup?
3. 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?

[JustinBridwell2]

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. 

[RobertScheitlin__GISP]

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.

[JustinBridwell2]

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. 

[RobertScheitlin__GISP]

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();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍