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!

[WilliamMiller4]

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

[RobertScheitlin__GISP]

William,

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

[WilliamMiller4]

Thank you, Robert!

[MichaelDuncan4]

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,

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

[Anonymous User]

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.

[RobertScheitlin__GISP]

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

[Anonymous User]

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

[HelenZhou]

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

[RobertScheitlin__GISP]

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

[HelenZhou]

Thanks Robert.