HOW TO

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

Last Published: October 1, 2021

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.

Article ID:000025937

Software:
  • ArcGIS Web AppBuilder

Get help from ArcGIS experts

Contact technical support

Download the Esri Support App

Go to download options

Related Information

Discover more on this topic