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?

[JustinBridwell2]

Hey Robert - I ran "wabVersion" in the console and it is indeed 1.2. I basically am tasked with making enhancements to this very old WAB app; this is why I have probably found the documentation confusing in so many instances (not just this one). Anyways, the below code almost worked. It went through the wm.openWidget(tm.id) and kicked over to the TaskManager widget.js onOpen function. It then kicked back to the InfoTemplate widget in the ".then" part and failed due to "Uncaught TypeError: Cannot read property '.then' of undefined."

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];
    wm.openWidget(tm.id)
        .then(lang.hitch(this, function (tmWidget) {
            console.log("Yo")
           //now you have a refernce to the Task Manager widget using tmWidget var
    }));
})); 

[RobertScheitlin__GISP]

Justin,

   That is because the openWidget does not return a promise it returns that widget instance. So your code would look like:

var tmWidget = wm.openWidget(tm.id);‍

[JustinBridwell2]

OK, I ran the following:

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];
    var tmWidget = wm.openWidget(tm.id);
}));

It ran, but nothing happened. No errors were thrown, but the TaskManager widget never opened either. Do I need to use something like PanelManager? I tried this, but I keep getting "PanelManager undefined" error.

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];
    var tmWidget = wm.openWidget(tm.id);

    var pm = PanelManager.getInstance();
    pm.showPanel(tmWidget);
}));

I added PanelManager under my requires at the top, but there is something skrewy with the documentation (its says to add "jimu/ PanelManager ", with a space before and after PanelManager. This breaks my code and the app won't load). Could I use `wm.loadWidget()` somehow instead? 

[RobertScheitlin__GISP · Accepted solution]

Justin,

   Don't worry about using PanelManager. Here is the code you need:

      var tm = this.appConfig.widgetPool.widgets[1];
      var tmWidget = WidgetManager.getInstance().openWidget(tm.id);
      var hc = WidgetManager.getInstance().getWidgetsByName("HeaderController")[0];
      hc.setOpenedIds([tm.id]);‍‍‍‍

[JustinBridwell2]

It worked! Whoa, thanks for hanging in there with Robert! That was quite a thread. Adding the HeadController - hc did the trick!

[RobertScheitlin__GISP]

Justin,

  As you see there are different methods (code) that has to be used depending on where the widget is located and theme being used. If this was the Tab theme then we would have to use the SidebarController, etc, etc.