Guidance for Web AppBuilder Widget Developmentgispd.com/Documents/NWGIS 2018, 20181031-Howes-WAB...

David Howes, Ph.D.

David Howes, LLC

dhowes.com

Guidance for Web AppBuilder Widget Development

Northwest GIS 2018October 31st, 2018

Acknowledgements

• Dean Anderson, Eric McAvoy - Polk County, OR

• John Sharrard, Esri

• Seattle Department of Transportation

• Toole Design Group

• Mike Murnane - City of Tacoma

https://www.esri.com/en-us/arcgis/products/web-appbuilder/overview

Web AppBuilder Versions

• ArcGIS Online• Online web application• https://www.esri.com/en-us/arcgis/products/web-

appbuilder/overview

• Portal for ArcGIS• On-premise web application• http://enterprise.arcgis.com/en/portal/latest/administer/wi

ndows/about-web-appbuilder-for-arcgis.htm

• Developer Edition• Locally hosted (desktop) web application• https://developers.arcgis.com/web-appbuilder/

Seattle Department of Transportation/Toole

Design Group Widgets

Exploration Widget

Polk County, OR, Widgets

Polk County Widgets

• Template Test• http://geoservices.co.polk.or.us/tt/

• Template Test widget

• PCMaps• http://geoservices.co.polk.or.us/pcmaps/

• Draw widget

• Measure widget

• Draw-Measure widget

Widget Development

Widget File Structure

css\ - Custom styles

images\ - Images

nls\ - National Language Support files

setting\ - Settings page files

config.json - Configuration file

manifest.json - Widget setup file

Widget.html - Widget UI file

Widget.js - Widget code file

Coding Editors

• Text editor

E.g., Notepad++

https://notepad-plus-plus.org/

• Integrated Development Environment (IDE)

E.g., Visual Studio Code

https://code.visualstudio.com/

Debugging

• Chrome Developer Tools

https://developers.google.com/web/tools/chrome-devtools/

• Firefox Developer Tools

https://developer.mozilla.org/en-US/docs/Tools

Tips, Tricks and Resources

Esri Help

• Developer Summit Technical Session videos

• GeoNET• Web AppBuilder Custom Widgets group

• https://community.esri.com/groups/web-app-builder-custom-widgets

• Help filesNote documentation for many out-of-the-box widgets is lacking, but Esri is working on it

Don’t Lose Your Work

• Keep plenty of backups

• If required, check your backup(s) before you remove your widget from your application

Removing a widget via the builder deletes the corresponding folder in the server application widgets folder

Code Reuse

Use existing code where possible

• Copy an existing widget and modify? Or,

• Start with an empty widget and copy existing code into the widget?

Depends on complexity

JavaScript API Development

• Develop logic in single web pages

• Easier to learn from and reuse Esri samples

• Bear in mind slight quirks in converting into widget code

E.g., standalone functions in the web page typically become functions attached to properties in the widget code:• Single page:

function initializeSelection() {}

• Widget:initializeSelection: function () {}

Advanced Support Tools

See

• Esri 2018 Developer Summit Tech Sessions• Web AppBuilder for ArcGIS Advanced Development

Tools and Techniques

• https://www.youtube.com/watch?v=cx906oBpcos

• Topics include• Task Runners

• Generators

Esri Trends - 4.x

ArcGIS API for JavaScript 4.x

• https://developers.arcgis.com/javascript/latest/guide/index.html

• Used for 3D Web AppBuilder applications

• May be coming later this year for 2D applications

Esri Trends - TypeScript

• http://www.typescriptlang.org/

• Open source language maintained by Microsoft

• Supports strong typing (no var)

• Transpiles to JavaScript• You write TypeScript code

• The application uses the transpiled JavaScript file

Takeaway Messages

Takeaway Messages (1)

• Start very small

• Keep plenty of backups

• Develop clean code

Takeaway Messages (2)

• Start with things that already exist

• Make the most of the GeoNET Web AppBuilder Community

• Don’t be afraid to break things

Courtesy of Eric McAvoy, Polk County, OR

David Howes, Ph.D.

David Howes, LLC

dhowes.com

Introduction to Web AppBuilder for ArcGIS Custom Widget Development

Northwest GIS 2018November 1st, 2018

Slides available at http://gispd.com/events

Thanks for Coming