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.
These are the conventions the widget should follow:
- Create a folder called setting to hold all of the setting related files.
- 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.
- 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.
- Create a Setting.html file in the setting folder to hold the config UI.
- Create a strings.js file in the setting/nls folder if the config needs to support internationalization.
- 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.