topic Re: How can I toggle the visibility of a widget? in ArcGIS Web AppBuilder Questions

How can I toggle the visibility of a widget?

JamieThompson2 — Sat, 11 Dec 2021 23:15:30 GMT

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

Re: How can I toggle the visibility of a widget?

RobertScheitlin__GISP — Sun, 27 Mar 2016 05:02:40 GMT

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

Re: How can I toggle the visibility of a widget?

JamieThompson2 — Wed, 30 Mar 2016 21:05:46 GMT

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!

Re: How can I toggle the visibility of a widget?

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:15:32 GMT

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

Re: How can I toggle the visibility of a widget?

JamieThompson2 — Thu, 31 Mar 2016 14:01:21 GMT

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!

Re: How can I toggle the visibility of a widget?

RobertScheitlin__GISP — Wed, 25 May 2016 19:04:17 GMT

Jamie,

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

Re: How can I toggle the visibility of a widget?

Alexwang — Tue, 20 Dec 2016 15:50:52 GMT

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?

Re: How can I toggle the visibility of a widget?

JamieThompson2 — Tue, 20 Dec 2016 15:55:20 GMT

Alex,

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

Re: How can I toggle the visibility of a widget?

Alexwang — Tue, 20 Dec 2016 16:31:23 GMT

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