How can I toggle the visibility of a widget?

7739
8
Jump to solution
03-25-2016 02:53 PM
JamieThompson2
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

8 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

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!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

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!

                                                               happyDance.jpg

0 Kudos
Alexwang
Occasional Contributor II

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?

0 Kudos
JamieThompson2
New Contributor III

Alex, 

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

0 Kudos
Alexwang
Occasional Contributor II
RobertScheitlin__GISP
MVP Esteemed Contributor

Jamie,

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

0 Kudos