Make widgets configurable in builder

If a widget is configurable, the widget's behavior can be changed by editing the config.json file. For a better user experience, the widget should provide a configuration UI to configure itself when it is configured in ArcGIS Web AppBuilder.

The widget should follow these conventions:

  1. Create a folder named setting to hold all of the setting-related files.
  2. Create a Setting.js file in the setting folder to hold the config logic. This class should inherit from the BaseWidgetSetting class. In this class, there is a config property that holds the widget config data.
  3. This class should override two methods, getConfig—to return the config data input by the user—and setConfig—to initialize the widget setting page depending on the widget config data.
  4. Create a Setting.html file in the setting folder to hold the config UI.
  5. Create a strings.js file in the setting/nls folder if the config needs to support internationalization.
  6. Create a style.css file in the setting/css folder to hold the css property.

During development, use http://your host/webappbuilder/?id=stemapp in a 2D app or http://your host/webappbuilder/?id=stemapp3d in a 3D app to directly access your widget. This URL helps test the configuration page of the widget. To see the widget in the 2D app, use http://your host/webappviewer/ to load stemapp.


To see the widget in a 3D app, a 3D app must first be created. Currently, http://your host/webappviewer3d/ does not work for 3D apps.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.