How To: Add on-screen widgets in Web AppBuilder for ArcGIS (Developer Edition)


When using Web AppBuilder for ArcGIS (Developer Edition), users may want to add more on-screen widgets to the map. By default, only four widgets are allowed to be added to the map at a time. However, more widgets can be added by modifying the config.json file of the desired app.


The instructions provided describe how to allow additional on-screen widgets to be added in Web AppBuilder for ArcGIS (Developer Edition).

  1. Open the Web AppBuilder for ArcGIS folder and open the server folder.
    The picture of server folder.
  2. Open the desired app folder, and edit the config.json file using a text editor (for example, Notepad++.)
  3. Search the file for the widgetOnScreen segment.
  4. Find an empty positioning element or the last section of the segment, and add the following code.
            "position": {
              "left": 205,
              "top": 45,
              "relativeTo": "map"
            "placeholderIndex": 1,
            "id": "_8"

    The following is an example of the final code snippet.

    Picture of final code snippet
    In the example above, the slot below CustomWidgetTemplate is used.
    When creating an empty widget section, it is recommended to add the value of 50 to the left parameter to correctly align the widget.

Related Information