Open a widget in its own panel (dialog)

4402
10
Jump to solution
06-05-2016 06:06 AM
Haider_Ali
Occasional Contributor

I have added a button on it's click i want to open a widget as a dialog. i am using below code to open a widget

var wconfig =

{

            "name": "Draw",

            "label": "Draw",

            "version": "2.0.1",

            "uri": "widgets/Draw/Widget",

            "config": "configs/Draw/config_Draw.json",

            "index": 6,

            "id": "widgets_Draw_Widget"

          };

this.widgetManager.loadWidget(wconfig).then(lang.hitch(this, function(widget) {

            widget.startup(); 

            this.widgetManager.openWidget(widget);

   }));

In the console it says widget [widgets/Draw/Widget] created. but i can't see the widget.

If i use this._getPanel(wconfig,true) the widget display in left panel

_getPanel: function(widgetCfg, start) { 

   var def = new Deferred(); 

   var panel; 

   if (widgetCfg) { 

  // Try getting the panel for this widget 

  panel = registry.byId(widgetCfg.id + '_panel'); 

  

  if (panel) { 

   def.resolve(panel); 

  } else { 

   this.panelManager.showPanel(widgetCfg).then(function(panel) { 

  if (start) { 

   panel.startup(); 

  } 

  def.resolve(panel); 

   }); 

  } 

   } else { 

  def.resolve(undefined); 

   } 

   return def; 

  }

Any Idea what i am doing wrong here

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Haider,

  It depends on if the widget is in a on screen placeholder or a controller panel

Here is some code for onscreen widget:

var pm = PanelManager.getInstance(); 
pm.showPanel(this.appConfig.widgetOnScreen.widgets[4]);

This will work for opening a widget in some themes controller widgets:

var controller = WidgetManager.getInstance().getWidgetsByName('MyThemeController'); 
controller.openWidget(widgetConfig);

How to open a widget from a controller programmatically ?

How to open a widget (in a placeholder) programmatically ?

View solution in original post

10 Replies
RobertScheitlin__GISP
MVP Emeritus

Haider,

  It depends on if the widget is in a on screen placeholder or a controller panel

Here is some code for onscreen widget:

var pm = PanelManager.getInstance(); 
pm.showPanel(this.appConfig.widgetOnScreen.widgets[4]);

This will work for opening a widget in some themes controller widgets:

var controller = WidgetManager.getInstance().getWidgetsByName('MyThemeController'); 
controller.openWidget(widgetConfig);

How to open a widget from a controller programmatically ?

How to open a widget (in a placeholder) programmatically ?

Haider_Ali
Occasional Contributor

i am using

  1. var pm = PanelManager.getInstance();  
  2. pm.showPanel(this.appConfig.widgetOnScreen.widgets[4]);

to open a widget but its opening in left panel instead of dialog i have also removed the panel from app configuration but it has no effect

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

What determines if the widget opens in a panel or an on screen widget is how you configure the widget. It sounds like you need to move your widget to one of the on screen widget place holders.

0 Kudos
Haider_Ali
Occasional Contributor

The documentation says if no panel is specified then jimu/OnScreenWidgetPanel is used by looking at the name it look's  like a dialog panel.

0 Kudos
Haider_Ali
Occasional Contributor

i launched my application now widget are opening into their own panel thanks, but if i open developer tool it goes in the left panel

0 Kudos
Haider_Ali
Occasional Contributor

Robert Scheitlin, GISP in the web app builder application developer and when application is launched and developer tools is opened,  widgets are opened in left panel any idea how to stop this behavior.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Haider,

  As I mentioned in my last post what determines if a widget opens in a panel or an on screen dialog type is where you add the widget and what theme you are working with. Take for example the default theme type "Foldable" it has 5 onscreen widget placeholders and a controller widget called the header controller widget, which can have many widget added. The on screen widget place holders open on screen in a dialog type panel and the widgets added to the header controller open in a right hand panel.

0 Kudos
Haider_Ali
Occasional Contributor

That is where i'm  confused why my placeholder  on screen wigdets are opening in right pannel  instead of dialog type panel when my screen height is small

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Haider,

  OK, now that you tell me about the screen size this now makes sense. WAB is an application that is developed with a responsive design and when the app is use on a device with a limited screen real estate then the app will automatically switch to a more mobile friendly design. This means widget that were dialog panel now become paneled widgets.