How do you deploy a custom widget in Web AppBuilder for ArcGIS Online or Portal for ArcGIS?

Question

I am trying to deploy a custom widget, (Save Session), in Web AppBuilder for ArcGIS Online. I want the users of my application to be able to save the layers they have checked-on and -off in their session for use in a future session, but I've never installed a custom widget before. Where do I start?

Answer 1

In order to install a custom widget in your Web Mapping Application, you will need to download, install, and configure Web AppBuilder for ArcGIS (WAB) Developer Edition. Custom widgets cannot be used with the WAB built-in to ArcGIS Online or Portal for ArcGIS. You can download WAB Developer Edition here: https://developers.arcgis.com/web-appbuilder/ Additional instructions and background can be found here: https://community.esri.com/thread/205211-publishing-custom-widget-in-arcgis-online

To deploy a custom widget in WAB Developer Edition, after verifying you've followed the steps above, you'll need to follow these steps:

• Download and unzip the custom widget. (Alternatively, you can write your own custom widget. Sample code to do so can be found here: https://developers.arcgis.com/web-appbuilder/sample-code/create-custom-in-panel-widget.htm)
• Copy the unzipped widget (in this case, it will be a folder called SaveSession) to this location: {Web AppBuilder for ArcGIS Developer Edition installation directory} > WebAppBuilderForArcGIS > client > stemapp > widgets
• Double-click to run startup.bat from {Web AppBuilder for ArcGIS Developer Edition installation directory} > WebAppBuilderForArcGIS
• Command Prompt should open. This starts the Node.js server in your default browser. Do not close this window until you're done using WAB Developer Edition.
• Your browser window should automatically open and navigate to WAB Developer Edition and/or a screen on which you will Specify the URL to your ArcGIS Online organization or Portal for ArcGIS. If your browser does not automatically open, you will need to navigate to http://[yourmachinename]:3344/webappbuilder, or http://[yourmachinename].[yourdomain]:3344/webappbuilder if your machine is in domain. Additional help, including the use of different ports or parameters, can be found in the help files that came installed with WAB Developer Edition.
• Create your app.
• Click the Widget tab.
• Add a widget.
• Your new custom widget should be available in the Choose Widget window (in your case, SaveSession should be between the Reviewer Dashboard and Scalebar widgets).

For additional background on the instructions above, for how to add a custom widget to WAB Developer Edition, check out Derek Law's article in the February 2017 edition of ArcWatch Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition