topic Re: Open a widget in its own panel (dialog) in Web AppBuilder Custom Widgets Questions

Open a widget in its own panel (dialog)

Haider_Ali — Sun, 05 Jun 2016 13:06:22 GMT

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

Re: Open a widget in its own panel (dialog)

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:49:25 GMT

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 ?

Re: Open a widget in its own panel (dialog)

Haider_Ali — Mon, 06 Jun 2016 17:17:03 GMT

i am using

var pm = PanelManager.getInstance();
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

Re: Open a widget in its own panel (dialog)

RobertScheitlin__GISP — Mon, 06 Jun 2016 17:52:54 GMT

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.

Re: Open a widget in its own panel (dialog)

Haider_Ali — Mon, 06 Jun 2016 18:11:46 GMT

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.

Re: Open a widget in its own panel (dialog)

Haider_Ali — Mon, 06 Jun 2016 18:59:38 GMT

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

Re: Open a widget in its own panel (dialog)

Haider_Ali — Wed, 08 Jun 2016 08:14:46 GMT

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.

Re: Open a widget in its own panel (dialog)

RobertScheitlin__GISP — Wed, 08 Jun 2016 13:03:01 GMT

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.

Re: Open a widget in its own panel (dialog)

Haider_Ali — Wed, 08 Jun 2016 13:09:34 GMT

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

Re: Open a widget in its own panel (dialog)

RobertScheitlin__GISP — Wed, 08 Jun 2016 13:15:14 GMT

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.

Re: Open a widget in its own panel (dialog)

Haider_Ali — Wed, 08 Jun 2016 13:23:23 GMT

sorry for not mentioning screen size before thanks