topic Re: How to change WAB widget window size? in ArcGIS Web AppBuilder Questions

How to change WAB widget window size?

DanielChantlos1 — Tue, 23 Aug 2016 14:55:06 GMT

Is there a way I can modify code in WAB Developer Edition to change the size of the widget window for specific widgets in LaunchPad theme? I am using WAB Developer Edition 2.1

Re: How to change WAB widget window size?

AdrianWelsh — Tue, 23 Aug 2016 15:15:08 GMT

Daniel,

Take a look at the example here:

Widget on-screen configuration—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Re: How to change WAB widget window size?

DanielChantlos1 — Tue, 23 Aug 2016 15:29:50 GMT

I looked in the OnScreenWidgetPanel.js file and do not see these lines of code inside.

Am I missing something? Also, I am hoping to set different sizes for different widgets.

Re: How to change WAB widget window size?

MichaelRobb — Tue, 23 Aug 2016 15:29:55 GMT

For WABde 2.0 you would go to the widget of interest.

For example, for the About Widget...

[app#]\widgets\About\css\style.css

Re: How to change WAB widget window size?

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:47:20 GMT

Daniel,

Another way to do it (other than Robb's way). If you want to resize a specific widget in the Launchpad theme then I would add this code to the startup function in that specific widgets Widget.js:

        var panel = this.getPanel();
        var pos = panel.position;
        pos.width = 600;
        panel.setPosition(pos);
        panel.panelManager.normalizePanel(panel);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to change WAB widget window size?

DanielChantlos1 — Tue, 23 Aug 2016 16:00:11 GMT

This may be a simple question, but what lines do you place this in the startup function?

Re: How to change WAB widget window size?

RobertScheitlin__GISP — Tue, 23 Aug 2016 16:17:07 GMT

Daniel,

It does not really matter. I placed it right before the end of the function.

Re: How to change WAB widget window size?

PhilLarkin1 — Tue, 23 Aug 2016 17:13:18 GMT

I gave your code a try. It works pretty well. However, if a user is to use the resize handle the widget size will default to width:400 height:400. The resize handle will not allow any size smaller than 400 after that. (400 is an estimate. The widget is reset to whatever the default is.)

Any ideas on how to overcome this issue? I might just remove the ability to resize as shown in your example here: disable/hide resize handle for Widget

Also, ESRI should probably be supplementing your salary. Thanks for all of your hard work on the forums. You have helped many people!

Re: How to change WAB widget window size?

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:47:23 GMT

Phil,

Nice catch. Here is the modified code to correct that issue:

var panel = this.getPanel();
panel.position.width = 600;
panel.setPosition(panel.position);
panel.panelManager.normalizePanel(panel);‍‍‍‍

Re: How to change WAB widget window size?

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:47:26 GMT

All,

Better yet, because the widget will revert to normal size once closed and reopened, you should just add a new onOpen function and not use the startup addition suggested earlier:

      onOpen(){
        var panel = this.getPanel();
        panel.position.width = 600;
        panel.setPosition(panel.position);
        panel.panelManager.normalizePanel(panel);
      },‍‍‍‍‍‍

Re: How to change WAB widget window size?

PhilLarkin1 — Sat, 11 Dec 2021 13:47:28 GMT

I have tried both suggestions: placing latest code in startup and onOpen functions. Neither overcome the resize handle issue. I'm testing this on WAB 2.1 with Chrome and IE 10.

I'm curious if danielchantlos has experienced the same thing. Anyone else?

This is what my onOpen function looks like (in Widget.js):

      onOpen: function () {

        var panel = this.getPanel();
        panel.position.width = 300;
        panel.position.height = 300;
        panel.setPosition(panel.position);
        panel.panelManager.normalizePanel(panel);

        console.log('onOpen');
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to change WAB widget window size?

DanielChantlos1 — Tue, 23 Aug 2016 17:58:20 GMT

Phil,

I just copy/pasted your code into my Widget.js as is after the Startup function, and I have no resize/reverting issue. In fact, this is exactly what I was looking for!

Thank you Robert and Phil!

Re: How to change WAB widget window size?

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:47:31 GMT

Phil,

I did not test making the widget smaller then the default original size for that you will have to have this in the startup function:

        var panel = this.getPanel();
        panel.position.width = 300;
        panel.position.height = 300;
        panel._originalBox = {
          w: panel.position.width,
          h: panel.position.height,
          l: panel.position.left || 0,
          t: panel.position.top || 0
        };
        panel.setPosition(panel.position);
        panel.panelManager.normalizePanel(panel);‍‍‍‍‍‍‍‍‍‍‍

and the onOpen function just the way you have it.

Re: How to change WAB widget window size?

PhilLarkin1 — Tue, 23 Aug 2016 18:05:05 GMT

Nice! I'm glad that is working for you. There must be something else going with my code. I think I'll disable the resize handle for now. Thanks for both of your help.

Here is what I am experiencing if anyone is curious:

link: Imgur

Re: How to change WAB widget window size?

PhilLarkin1 — Tue, 23 Aug 2016 18:18:20 GMT

Robert you are the guru. Thank you. Your latest suggestion is working.

I added this to onOpen and I'm not seeing any issues. So, I only have panel resize code in onOpen, not in startup. Do you anticipate that this would be a problem? Seems fine in testing.

Where is the documentation for getPanel()/setPosition()/normalizePanel()? I can't find anything from dojo or esri.

Re: How to change WAB widget window size?

RobertScheitlin__GISP — Tue, 23 Aug 2016 18:22:55 GMT

Phil,

No there should be no issue if it is working for you. The getPanel function is supported by all WAB widgets (thought that one was documented). But the others setPosition and normalizePanel are specific functions of the Launchpad panel (internal functions and not documented).

Re: How to change WAB widget window size?

PhilLarkin1 — Tue, 23 Aug 2016 18:28:35 GMT

Here is the only documentation related mention of getPanel() I can find: Communication to app container—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Re: How to change WAB widget window size?

RobertScheitlin__GISP — Tue, 23 Aug 2016 18:31:29 GMT

yep that is what I was thinking of.

Re: How to change WAB widget window size?

Anish_Adhikari — Fri, 20 Jan 2017 22:34:38 GMT

This has been super helpful for me. However, I wanted to modify it a bit and wanted the panel to open initially on default settings. After user clicks on the map, I wanted the panel to resize to my specified size. I have added the code on the map click event listener and the window successfully resizes. Now I want to add some code to the onclose function that will return the panel to the default state and not resized. I wanted to do this because the window is taking too much screen real estate once the onclick event is initizlized.

I have declared my variable in startup function :

var panel = this.getPanel();

Added These Lines on Startup event

panel.position.width = 820;
panel.setPosition(panel.position);
panel.panelManager.normalizePanel(panel);

Now not sure how to reset the panel to original size on close event

Re: How to change WAB widget window size?

RobertScheitlin__GISP — Fri, 20 Jan 2017 23:38:06 GMT

Anish,

In your startup function in the widget save the widgets original size to a widget var and then in the onClose function (you may have to add this function to the widget) get set the widgets size back to the original size var saved earlier.