guidance for web appbuilder widget developmentgispd.com/documents/nwgis 2018, 20181031-howes-wab...
TRANSCRIPT
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