topic Re: Web AppBuilder - Open in-panel Widget Programmatically in Web AppBuilder Custom Widgets Questions

Web AppBuilder - Open in-panel Widget Programmatically

CenterlineMapping — Wed, 09 Dec 2015 15:11:51 GMT

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!

Re: Web AppBuilder - Open in-panel Widget Programmatically

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:02:02 GMT

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'

Re: Web AppBuilder - Open in-panel Widget Programmatically

CenterlineMapping — Wed, 09 Dec 2015 19:58:25 GMT

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.

Re: Web AppBuilder - Open in-panel Widget Programmatically

RobertScheitlin__GISP — Wed, 09 Dec 2015 20:22:07 GMT

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.

Re: Web AppBuilder - Open in-panel Widget Programmatically

WilliamMiller4 — Sun, 12 Dec 2021 11:02:05 GMT

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

Re: Web AppBuilder - Open in-panel Widget Programmatically

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:02:07 GMT

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"));

Re: Web AppBuilder - Open in-panel Widget Programmatically

WilliamMiller4 — Sun, 12 Dec 2021 11:02:10 GMT

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

Re: Web AppBuilder - Open in-panel Widget Programmatically

WilliamMiller4 — Fri, 12 Aug 2016 20:47:19 GMT

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

Re: Web AppBuilder - Open in-panel Widget Programmatically

WilliamMiller4 — Fri, 02 Sep 2016 21:40:15 GMT

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

Re: Web AppBuilder - Open in-panel Widget Programmatically

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:02:13 GMT

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;
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Web AppBuilder - Open in-panel Widget Programmatically

WilliamMiller4 — Tue, 06 Sep 2016 16:03:27 GMT

Hi Robert,

I tried the code you supplied, but an uncaught reference error occurs:
_openWidgetGroup is not defined

I've added 'jimu/PanelManager','jimu/WidgetManager', 'dojo/_base/array' and 'dijit/_WidgetsInTemplateMixin', to define, along with their aliases.

The only thing I changed in the functions was swapping 'TOC and Legend' with 'TestGroup'.

I referenced the function with:
_openWidgetGroup();

I'm not sure what I'm doing wrong. I'm working with WAB 2.0.

Any assistance would be greatly appreciated.

William

Re: Web AppBuilder - Open in-panel Widget Programmatically

RobertScheitlin__GISP — Tue, 06 Sep 2016 16:08:37 GMT

William,

It would be this._openWidgetGroup() when you call that function.

Re: Web AppBuilder - Open in-panel Widget Programmatically

WilliamMiller4 — Tue, 06 Sep 2016 16:23:49 GMT

Thank you, Robert!

Re: Web AppBuilder - Open in-panel Widget Programmatically

MichaelDuncan4 — Fri, 20 Oct 2017 21:30:50 GMT

Robert,

I'm using this method to programmatically open the Attribute table when a from a separate custom widget, and getting an error "Cannot read property 'uri' of undefined". Any ideas? (I'm loading the PanelManager already).

I'm just trying to trigger the Attribute table to "expand" or Pop up. Is "showPanel" the correct method to use for this?

Thanks,

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

Re: Web AppBuilder - Open in-panel Widget Programmatically

Anonymous User — Wed, 26 Jun 2019 15:33:36 GMT

Greetings Robert! I added the two lines of code and panel require to open a Pool widget in Launchpad as you have illustrated above. It works. But.. it puts the widget off the map. I created a plain vanilla application with just eSearch and Infographic and it still does this behavior. This is WAB DE 2.12. It also did this for Legend and other widgets. https://public.sagis.org/TestWidgetOpenVanilla/

It does this for any widget; I tested a few. My goal is to use your excellent eSearch widget, and have results in some Infographic charts. Interestingly it works great, if I open your eSearch widget first, then close it, and then open the Infographic widget. However, if I start up, and first open Infographic, I see this issue. https://public.sagis.org/openwidget/ Also if I move the widget, it snaps up into the map, and then works fine. It's just that initially it seems to stick the widgets outside the map div. I tried telling it to position and normalize the widget even (top and left panel properties, etc). Anyone else seeing this?

I am seeing 'Cannot read property 'updateSize' of null at Object.resize (GridLayout.js?wab_dv=2.12:71)' in the Console. I'll try to track down what is causing this.

I decided to take out the width and height mod I added to eSearch using your panel guidance in another thread. Example: https://public.sagis.org/TestWidgetOpenVanillaWithoutPanelSizing/ It went from simply being outside the map div in placement, to outside the map div but also sized like only 10px by 10px, and only resized itself correctly when I went to click and drag it. It then snapped into the map div as with the other examples and also resized. In fact this is how it was behaving with other Esri basic widgets like Legend, it was a tiny 10px box.

Re: Web AppBuilder - Open in-panel Widget Programmatically

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:02:16 GMT

Kevin,

The issue is the launchpad theme is a whole other subject. In the Launchpad theme you have to assign the panels position before you open it. The Anchorbar controller handle this for you normally. So if you use these two lines of code instead in the Launchpad theme you will be good to go. Oh course you will need WidgetManager instead of PanelManager.

var widgetCtlr = WidgetManager.getInstance().getWidgetsByName("AnchorBarController")[0];
widgetCtlr.setOpenedIds([this.appConfig.widgetPool.widgets[0].id]);‍‍

Re: Web AppBuilder - Open in-panel Widget Programmatically

Anonymous User — Wed, 26 Jun 2019 17:05:41 GMT

Robert, as always, my proverbial hat is off to you. That works perfectly.

Re: Web AppBuilder - Open in-panel Widget Programmatically

HelenZhou — Sun, 12 Dec 2021 17:02:16 GMT

For web Appbuilder version 2.13, Here is the updated code of Robert's _getWidgetConfig to search config of a WidgetOnScreen widget. The original "this.wManager" is no longer valid.

Helen

        _getWidgetConfig: function(widgetName){  
                var widgetCnfg = null;  
                array.some(this.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.appConfig.widgetOnScreen.widgets, function(aWidget) {  
                    if(aWidget.name == widgetName) {  
                      widgetCnfg = aWidget;  
                      return true;  
                    }  
                    return false;  
                  });  
                }  
                return widgetCnfg;  
              },

Re: Web AppBuilder - Open in-panel Widget Programmatically

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

Helen,

Here is the new version I am using. It searches in widgetOnScreen groups too.

      _getWidgetConfig: function(widgetName) {
        var widgetCnfg = null;
        array.some(this.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.appConfig.widgetOnScreen.widgets, function(aWidget) {
            if(aWidget.name == widgetName) {
              widgetCnfg = aWidget;
              return true;
            }
            return false;
          });
        }
        if(!widgetCnfg) {
          /*Check OnScreen groups widgets if not found in OnScreen widgets*/
          array.map(this.appConfig.widgetOnScreen.groups, function(aGroup) {
            array.some(aGroup.widgets, function(aWidget) {
              if(aWidget.name == widgetName) {
                widgetCnfg = aWidget;
                return true;
              }
              return false;
            });
          });
        }
        return widgetCnfg;
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Web AppBuilder - Open in-panel Widget Programmatically

HelenZhou — Fri, 25 Oct 2019 18:31:40 GMT

Thanks Robert.