How can I toggle the visibility of a widget?

[JamieThompson2]

I currently have a few widgets in my config.json file that I would like to start out as not visible, so I am setting the "visible" property to false. I have another widget that will be sending a request and depending on the response from the request, I want to turn on the visibility of some of the widgets. This is what I currently have:

var widgetManager = WidgetManager.getInstance();
widgetManager.appConfig.widgetOnScreen.widgets[6].visible = true;
widgetManager.loadWidget(widgetManager.appConfig.widgetOnScreen.widgets[6]).then(lang.hitch(this, function(widget){
          

     console.log(widget);
}));

The console log I have shows that the visible property is set to true (widget { visible:true }), but the widget is not visible in the application. Can anyone help with this?

Thanks,
Jamie

[RobertScheitlin__GISP]

Jamie,

You will have to use the PanelManager and showPanel function. Here is a thread that details the code needed:

Load In-Panel Widget onStart of the application

[JamieThompson2]

Robert,

Thank you! this was helpful. I am currently able to add onScreen widgets, but I'm having difficulties adding widgets into the widget pool & having them show up. The user is first prompted with a login widget - which will return widgets the user is allowed to view. After that I use can successfully create the widgets, but I am having issues adding them to the Header Controller (top panel of the Foldable Theme). Would you happen to know anything about how to do this or if it might simply be one of the limitations of the WAB? I've tried a few different things but nothing seems to work, but it seems like something that others would have probably tried to do already.

Thanks!

[RobertScheitlin__GISP · Accepted solution]

Jamie,

  Sure thing here is some code for that:

//utility function to get the proper widget config based on the widget name !Not Label but 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;
},
//call utility function to get the proper widget config based on the widget name !Not Label but Name!
//The label can be changed by the widget configurer
var widgetCfg = this._getWidgetConfig('Legend');
widgetCfg.visible = true;
var headerCfg = this._getWidgetConfig('HeaderController');
var headerWidget = this.wManager.getWidgetByLabel(headerCfg.label);
//This is need to show the widgets icon in the header
headerWidget.resize();
//This actually open the widget
headerWidget.setOpenedIds([widgetCfg.id]);

[JamieThompson2]

Wow thank you! I had spent a majority of yesterday trying different things, this will help me save so much time. I really appreciate it!

                                                              

[Alexwang]

Hi Jamie, I tried Robert's codes, and it worked for Foldable Theme, but didn't work for Launchpad theme even i have changed the "HeaderController" to "AnchorBarController". Did they work for you?

[JamieThompson2]

Alex, 

I only used the Foldable theme, so I'm not sure. 

[Alexwang]

please see Roberts' another post - https://community.esri.com/message/654968-re-showhide-widgets-on-the-fly?commentID=654968&et=watches... 

[RobertScheitlin__GISP]

Jamie,

  Please mark this thread as answered by click on the "Correct Answer" link on the reply that answered your question.