Web AppBuilder - Open in-panel Widget Programmatically

[CenterlineMapping]

Is there a way to programmatically open an in-panel widget programmatically?

We would like an in-panel widget to open when the user clicks 'OK' in the splash widget.

If we use the config.json file and add 'open at startup true' to the in-panel widget, then the splash widget does not open first.  The idea would be to allow the user to see the splash screen, and then when they click 'OK' the in-panel layer list widget will open.

Thanks for any comments and suggestions!

[RobertScheitlin__GISP · Accepted solution]

Centerline Mapping,

All you need to do is add this code to the onOkClick function in the Splash widgets Widget.js file at the very end of the function:

(of course you will need to adjust the widget number "4" to the appropriate widgetOnScreen number you want to launch.)

var pm = PanelManager.getInstance();
pm.showPanel(this.appConfig.widgetOnScreen.widgets[4]);

Also you will need to add the require for 'jimu/PanelManager'

[CenterlineMapping]

Robert,

Thanks for your quick solution.  I was able to switch to widgetPool and open the correct widget.  I do notice a minor bug, where the widget is now open, although, clicking the widget icon again, does not close the widget.  I will continue to look into this.  Thanks for your help.

[RobertScheitlin__GISP]

Centerline Mapping,

  Glad to help. Don't forget to mark this thread as answered. To do this you have to open the thread (you can not see the correct answer link from inside your inbox) and then you will see the green star with correct answer link. Just click that link on the thread that answered your question.

[WilliamMiller4]

Hi Robert,

Does this code still work in Web AppBuilder 2.0? I keep getting "Uncaught TypeError: Cannot read property 'id' of undefined". I'm trying to open a widget, for example purposes the Legend widget, which is under widgetPool > widgets in my app's root config file. The "id" property has "widgets_Legend_Widget_16", so I am using your code as follows:

define([...
'jimu/PanelManager'],
function(..., PanelManager){
  var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
    ...
    onOkClick: function(){
      ...
      var pm = PanelManager.getInstance();
      pm.showPanel(this.appConfig.widgetPool.widgets[16]);
    },
    close: function(){...}
  });
  return clazz;
});

Any guidance is much appreciated.

William

[RobertScheitlin__GISP]

William,

You can use this support function to get the actual widgetconfig by name:

_getWidgetConfig: function(widgetName){
        var widgetCnfg = null;
        array.some(this.wManager.appConfig.widgetPool.widgets, function(aWidget) {
          if(aWidget.name == widgetName) {
            widgetCnfg = aWidget;
            return true;
          }
          return false;
        });
        if(!widgetCnfg){
          /*Check OnScreen widgets if not found in widgetPool*/
          array.some(this.wManager.appConfig.widgetOnScreen.widgets, function(aWidget) {
            if(aWidget.name == widgetName) {
              widgetCnfg = aWidget;
              return true;
            }
            return false;
          });
        }
        return widgetCnfg;
      },

var pm = PanelManager.getInstance();  
pm.showPanel(this._getWidgetConfig("Legend"));

[WilliamMiller4]

Hi Robert,

I was able to get the code to work after adding 'dojo/_base/array' and 'jimu/WidgetManager' to define, along with their aliases, and creating an instance of WidgetManager in the _getWidgetConfig function (this.wManager = WidgetManager.getInstance();). Standard widgets, like Legend, will open, however I get the following error when I look for a custom widget I created to open in a group: "Uncaught TypeError: Cannot read property 'id' of nullI". I added the following code to the support function to look for the widget in the groups section of the widgetPool:

/*Check widgetPool.groups widgets*/
array.some(this.wManager.appConfig.widgetPool.groups.widgets, function(aWidget) {
  if(aWidget.name == widgetName) {
    widgetCnfg = aWidget;
    return true;
  }
  return false;
});

so the entire function reads as:

_getWidgetConfig: function(widgetName){
  var widgetCnfg = null;
  this.wManager = WidgetManager.getInstance();
  /*Check widgetPool.groups widgets*/
  array.some(this.wManager.appConfig.widgetPool.groups.widgets, function(aWidget) {
    if(aWidget.name == widgetName) {
      widgetCnfg = aWidget;
      return true;
    }
    return false;
  });
  if(!widgetCnfg){
    /*Check widgetPool widgets if not found in widgetPool.groups*/
    array.some(this.wManager.appConfig.widgetPool.widgets, function(aWidget) {
      if(aWidget.name == widgetName) {
        widgetCnfg = aWidget;
        return true;
      }
      return false;
    });
  }
  if(!widgetCnfg){
    /*Check OnScreen widgets if not found in widgetPool*/
    array.some(this.wManager.appConfig.widgetOnScreen.widgets, function(aWidget) {
      if(aWidget.name == widgetName) {
        widgetCnfg = aWidget;
        return true;
      }
      return false;
    });
  }
  return widgetCnfg;
},

In the config file of my modified default layout, in my modified version of the FoldableTheme (eFoldableTheme, which also includes a new modal panel), I added the custom ModalTab Widget as follows,

"widgetPool": {
  "panel": {
    "uri": "themes/eFoldableTheme/panels/FoldablePanel/Panel",
    "position": {
      "top": 5,
      "right": 5,
      "bottom": 5,
      "zIndex": 5
    }
  },
  "groups": [{
    "widgets": [{
      "uri": "widgets/ModalTab/Widget"
    }],
    "panel": {
      "uri": "themes/eFoldableTheme/panels/ModalPanel/Panel",
      "position": {
        "relativeTo": "browser",
        "zIndex": 102
      }
    }
  }]
},

and it generates in a new app config file as:

"widgetPool": {
  "panel": {
    "uri": "themes/eFoldableTheme/panels/FoldablePanel/Panel",
    "position": {
      "top": 5,
      "right": 5,
      "bottom": 5,
      "zIndex": 5,
      "relativeTo": "map"
    }
  },
  "groups": [
    {
      "widgets": [
        {
          "uri": "widgets/ModalTab/Widget",
          "id": "widgets_ModalTab_Widget_34",
          "IsController": false,
          "name": "ModalTab",
          "label": "ModalTab",
          "index": 0
        }
      ],
      "panel": {
        "uri": "themes/eFoldableTheme/panels/ModalPanel/Panel",
        "position": {
          "relativeTo": "browser",
          "zIndex": 102
        }
      },
      "isPreconfiguredInTheme": true,
      "id": "_33",
      "visible": true,
      "label": "ModalTab",
      "icon": "widgets/ModalTab/images/icon.png",
      "index": 2
    }
  ],
  "widgets": [
    {
      "uri": "widgets/Legend/Widget",
      "version": "2.0.1",
      "id": "widgets_Legend_Widget_16",
      "name": "Legend",
      "label": "Legend",
      "index": 0
    },
    {
      "uri": "widgets/LayerList/Widget",
      "version": "2.0.1",
      "id": "widgets_LayerList_Widget_17",
      "name": "LayerList",
      "label": "Layer List",
      "index": 1
    }
  ]
},

I use 'ModalTab' when I call the _getWidgetConfig function, as follows.

var pm = PanelManager.getInstance();
pm.showPanel(this._getWidgetConfig('ModalTab'));

What am I doing wrong? How does one reference a custom widget in a group?

As always, any help you can provide is much appreciated.

William

[WilliamMiller4]

Hi Robert,

There's no need to reply to my last reply. I found an article​ that you commented on in June concerning the issue of opening a grouped widget on load and its unsupported nature. You might want to edit your last reply so it includes the additions I mentioned in my opening paragraph, which I'm pretty sure are needed.

Thank you for your help and have a great weekend.

William

[WilliamMiller4]

Hi Robert,

Just checking: There is no support for opening a grouped widget programmatically, is there? Not just on load, but at any time.

Thanks again for your help.

William

[RobertScheitlin__GISP]

William,

   Sure here is the needed code:

_openWidgetGroup: function() {
          var groupCfg = this._getWidgetConfig('TOC and Legend'); //this is the label you assign to the group
          if (groupCfg) {
            var pm = PanelManager.getInstance();
            pm.showPanel(groupCfg);
          }
      },

      _getWidgetConfig: function(widgetName){
        var widgetCnfg = null;
        this.wManager = WidgetManager.getInstance();
        /*Check widgetPool.groups widgets*/
        array.some(this.wManager.appConfig.widgetPool.groups, lang.hitch(this, function(group) {
            if(group.label == widgetName) {
              widgetCnfg = group;
              return true;
            }
            return false;
        }));
        if(!widgetCnfg){
          /*Check widgetPool widgets if not found in widgetPool.groups*/
          array.some(this.wManager.appConfig.widgetPool.widgets, lang.hitch(this, function(aWidget) {
            if(aWidget.name == widgetName) {
              widgetCnfg = aWidget;
              return true;
            }
            return false;
          }));
        }
        if(!widgetCnfg){
          /*Check OnScreen widgets if not found in widgetPool*/
          array.some(this.wManager.appConfig.widgetOnScreen.widgets, lang.hitch(this, function(aWidget) {
            if(aWidget.name == widgetName) {
              widgetCnfg = aWidget;
              return true;
            }
            return false;
          }));
        }
        return widgetCnfg;
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍