Publish a custom widget in ArcGIS Experience Builder

Summary

A custom widget in ArcGIS Enterprise is a user-developed component that supports organization-specific workflows, custom UI/behavior, or integrations with internal or external systems. Starting with ArcGIS Enterprise 11.0, Experience Builder supports adding these custom widgets (built with Experience Builder Developer Edition). Custom widgets built for ArcGIS Web AppBuilder can’t be reused in Experience Builder and must be rewritten because of a different framework/technology stack. See the ArcGIS Experience Builder FAQ page, and Migrating from Web AppBuilder.

Procedure

1. Copy the custom widget setup files to the local machine. In this example, we are using the Add Layers custom widget.
2. Download the ArcGIS Experience Builder Developer edition compatible with the ArcGIS Enterprise version in use.
3. Compile the ArcGIS Experience Builder Developer edition. See  also: How to install Experience Builder developer edition
4. Copy the custom widget into the following directory:

arcgis-experience-builder/client/your-extensions/widgets

5. From a command prompt, run the following command under the client directory. Once done, the compiled widget shows in the client/dist-prod/widgets directory. 

npm run build: prod

6. Copy the add-layers folder to the C:\inetput\wwwroot folder. 

7. Navigate to IIS > machine name > default website, right-click add-layers, and click Convert to Application. 

8. Right-click the application, and click Switch to content view.

9. Select the manifest.json file, and click Browse.

10. Copy the manifest.json URL, and in the portal Home page, click My Content > New item, choose Application, and select Experience builder widget. 
11. Under Manifest URL, paste the manifest.json URL.

Note: 
Administrator privileges are required to upload the manifest URL.

12. From the portal Home Content tab, click Create app, select Experience Builder, and on the Experience Builder landing page, click the Create new. Add the map widget and select the web map.
13. In the Insert Widget section, scroll down to the custom section; we will be able to see the add layers widget is visible, and add it to the application.