How To: Add a new default Basemap Gallery widget when creating applications in Web AppBuilder for ArcGIS (Developer Edition)


When creating applications using Web AppBuilder for ArcGIS (Developer Edition), users may want to automatically display user-defined basemaps in the Basemap Gallery widget when the application is launched. By default, Web AppBuilder for ArcGIS applications load the default Esri basemap from the basemap gallery of the user's organization or portal. This is done via the organization URL or portal URL used to access the application.

The instructions provided describe how to directly modify the configuration files of the Web AppBuilder for ArcGIS application by creating a new customized Basemap Gallery widget, which automatically loads all user-created basemaps when the application is launched.


The steps below require making changes to files located in the application's stemapp folder using a text editor, such as Notepad++. It is recommended to create a backup of each file before making the changes. Ensure that each file is saved after the changes are made. 
Changing the Basemap Gallery widget's default basemaps causes the basemap galleries in all other applications accessed via ArcGIS Online to change.
  1. Open the config.json file located in the stemapp folder (Directory: \WebAppBuilderForArcGIS\client\stemapp\config), go to the widgets property under the widgetPool section, and add a new BasemapGallery widget by specifying the name and uri path for the widget. To do so, add the following:
    "label": "NewBasemapGallery",
    "uri": "widgets/NewBasemapGallery/Widget"
  1. In the manifest.json file of the new Basemap Gallery widget created (Directory: \WebAppBuilderForArcGIS\client\stemapp\widgets\NewBasemapGallery\manifest), change the default name to the name specified in Step 1.
"name": "NewBasemapGallery",
  1. In the strings.js file located in the new Basemap Gallery widget's nls folder (Directory: \WebAppBuilderForArcGIS\client\stemapp\widgets\NewBasemapGallery\nls\strings), set a new name for the widget by changing the widget's default name in the widgetLabel property. The new name is used as the Basemap Gallery widget's name in the application.
_widgetLabel: "New Basemap Gallery"
  1. In the test-data.js file (Directory: \stemapp\jimu\tests\testagoltemplate\test-data), change the config path at line 215 to the following:
"config": "widgets/BasemapGallery/config.json"
  1. Edit the main config.json file (used in Step 1) by adding the contents of the new Basemap Gallery widget's config.json file.
  2. Restart the application. The basemaps display in the Basemap Gallery widget when the application is launched.

Related Information