topic Re: Panel default size in Web AppBuilder Custom Widgets Questions

Panel default size

eduAED — Tue, 21 Apr 2015 08:41:51 GMT

How can I configure the default size of a Panel?

I want to start a widget within a small panel.

Thanks!

Re: Panel default size

StanMcShinsky — Tue, 21 Apr 2015 13:36:13 GMT

To change the default panel size you just need to adjust the values in the main config.json file. In there you will see values for height and width. This will allow you to adjust the size of the panel individually.

-Stan

Re: Panel default size

eduAED — Tue, 21 Apr 2015 13:46:09 GMT

I would like to configure it on the widget itself by default. I tried to configure it on the manifest.json file, but it is not working.

Is there any other way to do it?

Thanks!

Re: Panel default size

StanMcShinsky — Sun, 12 Dec 2021 10:07:27 GMT

I was referencing the main config.json file in server\apps\##\config.json not in the widget folder.

for example:

        "position": {
          "left": 55,
          "top": 45,
          "width": 400, //change this value
          "height": 410 //change this value
        },

-Stan

Re: Panel default size

eduAED — Wed, 22 Apr 2015 06:54:59 GMT

Yes, I know. But then it must be configured for each application.

My question is if it can be configured in the widget itself by default.

Thanks.

Re: Panel default size

StanMcShinsky — Sun, 12 Dec 2021 10:07:29 GMT

edu AED ,

If you want to set it as the default for all new apps created then you would need to set it in the stemapp layout theme. For example for the foldable theme you need to edit the config here: arcgis-web-appbuilder-1.1\client\stemapp\themes\FoldableTheme\layouts\default\config.json This will make that widget spot that size no matter what widget you load into it.

For example, if you change the height to 800 and width to 600 of the widget space in that file and you reload your theme into your web app then every time you add a widget in that space (no matter the widget) you will get the panel to be that size. Here you are starting to create a custom theme.

If you want to adjust the width of the side panel then you would need to go into \arcgis-web-appbuilder-1.1\client\stemapp\themes\FoldableTheme\panels\FoldablePanel\Panel.js and modify this chunck of code and change the value from 360 to whatever you want.

    function getPanelWidth() {
      var layoutBox = html.getMarginBox(jimuConfig.layoutId);
      if (layoutBox.w <= criticality) {
        return '100%';
      } else {
        return 360;
      }
    }

-Stan

Re: Panel default size

PrevinWong1 — Wed, 22 Apr 2015 22:07:22 GMT

If you mean that you want to resize the widget panel during start up so that you are using the default theme, but want different size widgets, then I think you need to go through PanelManager.

require(["jimu/PanelManager","dojo/dom-style"], function(PanelManager, domStyle) {

var pm = PanelManager.getPanelById("__id__Panel");

domStyle.set(pm,"width",100);

}); something like that.

Very vague documentation.

PanelManager class—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Re: Panel default size

StanMcShinsky — Wed, 22 Apr 2015 23:00:03 GMT

Previn Wong ,

I have not tried that but it might be interesting to look into.

-Stan

Re: Panel default size

eduAED — Wed, 13 May 2015 07:00:15 GMT

Thanks Previn!

I tryed what you said but it is not working for me...

What works for me was:

var pm = PanelManager.getPanelById("__id__Panel");

pm.resize({w:100});

Thanks!!

Re: Panel default size

denverweston — Mon, 13 Jul 2015 20:54:45 GMT

Can a resize be done on the current open panel?

Re: Panel default size

MichaelGaigg — Tue, 22 Sep 2015 22:03:49 GMT

First one must get the instance of the PanelManager. What worked for me was

var pm = PanelManager.getInstance().getPanelById(this.id + '_panel');

pm.resize({h:720});

Re: Panel default size

RyanCoodey — Fri, 10 Dec 2021 17:27:40 GMT

Thanks for the example. This works for me except on initial load of the widget. Tried it in postCreate, startup, onOpen... based on the lifecycle of a widget docs, onOpen is the last to be called so currently have it there. Opening the first time the widget size does not resize but after closing and reopening then the resize does work each time thereafter.

It seems to be a timing issue because if I put a breakpoint on this line then let it continue, it works on initial load too. Also, if I add a setTimeout for like 1 second it works. Anyone know if there is an event to subscribe to for whatever else needs to happen first?

BTW, I am doing this in a Portal 10.8.1 web app custom widget, not stand alone WAB.

Re: Panel default size

B-L — Tue, 01 Nov 2022 20:41:35 GMT

Hi @RyanCoodey ,

I know this is an old thread but I ran into the same issue and found a solution on this page https://support.esri.com/en/technical-article/000025937 . I was missing....

      panel.setPosition(panel.position);        
      panel.panelManager.normalizePanel(panel);

The full code of what worked for me is:

var pm = PanelManager.getInstance(); var panelID = pm.activePanel.id; var activePanel = pm.getPanelById(panelID); activePanel.position.width = 669; activePanel.setPosition(activePanel.position); activePanel.panelManager.normalizePanel(activePanel);