English

How To: Change the default size for widget windows in Web AppBuilder Developer Edition

Summary

Any widget in an application may require resizing every time it is opened to display its content clearly. This can hinder the user experience and make the application seem inefficient.

Following these steps, the size of a widget window can be set to certain values in pixels manually. As a result, whenever the widget is opened, its window will have a size suitable for displaying its content.

In the 'Widget.js' file of a widget, there are various callback functions associated with the actions performed by the widget. By adding code that changes certain values of the properties of the widget, such as height and width of the panel, this code can be executed when these functions are called.

Procedure

To set the default widget size:

  1. Navigate to [Web AppBuilder installation directory] > server > apps > [App directory] > widgets > [Widget directory]
  2. Open the Widget.js file in a text editor.
  3. Find the following code and edit it.
    onOpen: function() {        
      var panel = this.getPanel();    
      panel.position.width = 600; 
      panel.position.height = 600; 
      panel.setPosition(panel.position);        
      panel.panelManager.normalizePanel(panel);      
    },
  • This code is an example for the Launchpad theme widgets. For other widgets, the 'setPosition' and 'normalizePanel' methods may not be required.
  • The values for width and height are in pixels.

With this change, the application resizes the widget every time it is opened, since the 'onOpen' function is used.

Related Information

Last Published: 10/1/2021

Article ID: 000025937

Software: ArcGIS Web AppBuilder 2.9, 2.8, 2.7, 2.6, 2.5, 2.4, 2.3, 2.21, 2.20, 2.2, 2.19, 2.18, 2.17, 2.16, 2.15, 2.14, 2.13, 2.12, 2.11, 2.10, 2.1, 2.0