Adding a Custom Widget to the Web App Builder

Note that the functionality to deploy custom widgets in the Portal-hosted Web AppBuilder is now supported at 10.5.1. See this Esri blog for more details: https://blogs.esri.com/esri/arcgis/2017/06/30/web-appbuilder-for-arcgis-now-supports-custom-widgets-in-arcgis-enterprise-10-5-1/

The Web AppBuilder from Esri has already proven to be a powerful tool for creating new web mapping apps incredibly quickly – for us and many of our users. One challenge we keep coming across is that ‘it provides us with 80% of what the users actually need’. So, how do we go about giving them the last 20%, without building a new app from scratch with the SDKs? Well, the answer is to create your own custom widgets – this is fairly well documented by Esri (see link). But what if you have Portal for ArcGIS in your organisation and want to embed the widget in there? Well, let’s walk through the steps on how to go about doing this.

For detailed instructions and screenshots of every step, please click on the link below to view the pdf documentation:
Portal Widget Install Guide rev02

P.S. Please remember to make a backup of all the files we will be editing in these steps.

Step 1:

First copy your custom widget with all its files into the following widgets directories:

“<install_location>\ArcGIS\Portal\apps\webappbuilder\stemapp\widgets\”

“<install_location>\ArcGIS\Portal\apps\webappviewer\widgets\”

 Widget_Picture01

If you are uncertain about the structure in which your widget should be, have a look at some of the other widgets in these directories.

Step 2:

Next you will want to add your widget to the config.json files:

“<install_location>\ArcGIS\Portal\apps\webappbuilder\stemapp\”

“<install_location>\ArcGIS\Portal\apps\webappviewer\”

 Widget_Picture02

  • Set “widgetManifestsMerged”: true

  • Add custom widget to the “WidgetPool”\”widgets” section

Step 3:

Add your widget’s manifest to the widget manifest file “widgets-manifest-builder.json” to the following locations:

“<install_location>\ArcGIS\Portal\apps\webappbuilder\stemapp\widgets\”

“<install_location>\ArcGIS\Portal\apps\webappviewer\widgets\”

To save time you can copy one of the existing widget’s manifests and change the details accordingly.

Step 4:

Congratulation, you are all done!

Now all that is left is to restart Portal for ArcGIS or JavaScript Application Builder and you will be able to use your custom widget in your app builder.

Widget_Picture03

Leave a Reply