Open a widget in its own panel (dialog)

[Haider_Ali]

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

[RobertScheitlin__GISP · Accepted solution]

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]

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

[RobertScheitlin__GISP]

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.

[Haider_Ali]

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.

[Haider_Ali]

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

[Haider_Ali]

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.

[RobertScheitlin__GISP]

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.

[Haider_Ali]

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

[RobertScheitlin__GISP]

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.