Using the Drilldown Widget with Web AppBuilder Dev Edition
-
The developer edition of the Web AppBuilder can be found here.
Download the Web AppBuilder for ArcGIS (Developer Edition) ZIP file to your local drive and unzip it.
-
Download the Web AppBuilder Drilldown widget from GitHub, this can be found here.
Extract the folder from the zip file somewhere on disk, within this folder is another folder called “Drilldown”. This contains all of the code we need to put into the Web AppBuilder application.
-
To make the Drilldown widget available for all templates you need to add the “Drilldown” folder into your Web AppBuilder widgets folder. The widgets folder can be found in client\stemapp\widgets. See the screenshot below for an example of the folder structure.
-
The Drilldown widget will now be available to add to any of your applications you create. So you can add an additional search capability as a custom widget when configuring a template (in addition to the built in search widget) so your users can choose to use the Drilldown instead of the built in Search. (See below for details of how to replace the default search widget with the drilldown widget)
The screenshot below shows the Drilldown widget available in the list of widgets.
-
If you want the Drilldown widget to be used as the default instead of the Search widget then you can modify each templates configuration. Swap out the Search widget for the Drilldown widget and then you can use the Drilldown functionality or the normal search functionality. Open the folder containing the configuration for the application you wish to modify, the application configurations are usually found in \WebAppBuilderForArcGIS\client\stemapp\predefined-apps
In the predefined-apps folder are all of the available apps, contained in their own folders, and in each of these are the config files that need to be updated. In the screenshot below you can see the config.json file for the basic viewer application.
Open the config.json file and find every instance of the Search widget, so look for "Search".
In the screenshot there are a few places where the Search widget is referenced, all we do is change “Search” to be “Drilldown” then the application will use the Drilldown widget instead of the Search.