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 config UI to config itself when it is configured in Web AppBuilder for ArcGIS.

These are the conventions the widget should follow:

  1. Create a folder called 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 2D app or http://your host/webappbuilder/?id=stemapp3d in 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 3D app, we have to create a 3D app first. Currently http://your host/webappviewer3d/ does not work for 3D app.