Define the template

Each Web AppBuilder for ArcGIS widget has an HTML template. This template defines the widget’s UI.

Open the Widget.html file in a text editor. Replace the content with the following:

<div>
    <div>I am a demo widget.</div>
</div>

To test your widget, open the config-demo.json file in the stemapp/sample-configs folder for 2D widget or stemapp3d/sample-configs folder for 3D widget. Find widgetPool->widgets, and add a new widget element as follows:

{
  "label": "demo",
  "uri": "widgets/Demo/Widget"
}

Start the app through http://[your host]/webappviewer/?config=sample-configs/config-demo.json, and click the icon. The widget will look like the following:

Define the widget template

Note:

By default, the widget’s template does not support dijits in the template. If you need to use dijits in the template, add dijit/_WidgetsInTemplateMixin to your required list, and add this class to your widget. Ensure that you have all the required dijits for your template. For more information, see Creating template-based widgets.