Guidance for Web AppBuilder Widget Development
David Howes, Ph.D.David Howes, LLChttp://dhowes.com/
2018 Washington GIS ConferenceMay 23rd, 2018
Agenda
• Widget examples
• Widget implementation
• Widget development and deployment
• Tips, tricks and resources
• Audience engagement
• Takeaway messages
David Howes, Ph.D.
• Education• B.Sc. (Hons) in Geography – University of Salford,
England• M.Sc. in Geographic Information Systems – University of
Edinburgh, Scotland• Ph.D. in Geomorphology – State University of New York
at Buffalo, New York
• 28 years in GIS
• Established David Howes, LLC in 2012
• Specialty: GIS tools, processes and supporting infrastructure
Acknowledgements
• Dean Anderson, Eric McAvoy - Polk County, OR
• John Sharrard, Esri
• Seattle Department of Transportation
• Toole Design Group
• Mike Murnane - City of Tacoma
Example: Seattle Department of
Transportation/Toole Design Group Widgets
Web AppBuilder
Task
• Create Web AppBuilder widgets to support the Seattle Bike and Pedestrian Safety Analysis (BPSA) project at Seattle Department of Transportation (SDOT)
• Web AppBuilder application created by SDOT
• Data developed by Toole Design Group
Seattle Department of Transportation Widgets
• Exploration widget• Modified existing Query widget• Generic• Configurable
• Attribute Table widget• Modified existing Attribute Table widget• Generic• Honors map layer definition query (if set)
• Countermeasures widget• New widget• Specific to BPSA project• Configurable
Query Widget
Exploration Widget
Exploration Widget
Exploration Widget
Exploration Widget
Countermeasures Widget
Countermeasures Widget
Example: Polk County 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
Demo: Polk County Widgets
Widget Implementation
Web AppBuilder Options
• ArcGIS Online• Online application
• https://www.esri.com/en-us/arcgis/products/web-appbuilder/overview
• Developer Edition• Desktop version
• Uses Node.js server
• https://developers.arcgis.com/web-appbuilder/
Using the Developer Edition
• Download the SDK zip file
• Unzip to your local drive
• Double-click on the startup file
<Web AppBuilder folder>\startup.bat
• Sign in to ArcGIS Online when prompted
Widget Folders
• A Web AppBuilder widget is a collection of files in a folder
• Two key folder locations• Client - source code for use in any application
<Web AppBuilder folder>\client\stemapp\widgets
• Server - code for specific applications
<Web AppBuilder folder>\server\apps\<app ID>\widgets
Widget Installation
When you install a widget using the AppBuilder program
• The widget folder is copied from the client widgets folder to the application’s widget folder
• A config file will be placed in the application’s widget configs folder, if required
• The application’s config file is updated to record the installation of the widget
Widget Development
Widget File Structure
<Web AppBuilder folder>\server\apps\<app ID>\widgets\
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
Widget Demos
1. Basic example• No settings folder/file(s)
• No config file
• No NLS (National Language Support) file(s)
• No custom stylesheet
2. Add GIS operationsQuery polygons
3. Add config and NLS files
Demo: Widget Development
Where to Develop
Three key folder locations
• Server - code for specific applications
<Web AppBuilder folder>\server\apps\<app ID>\widgets
• Project - somewhere on your drive, e.g.,
C:\WAB Development\widgets
• Client - source code for use in any application
<Web AppBuilder folder>\client\stemapp\widgets
Basic Coding Strategy
• Applies to a development environment only
• Develop and test code in application folder
• Synchronize files with client and project folders
Don’t edit production files directly
Beyond Compare for File Synchronization
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
Widget Deployment
• Can’t deploy custom widgets to ArcGIS Online due to security concerns
• Can deploy custom widgets to ArcGIS Enterprise with some restrictions
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
• Check your backup(s) before you remove your widget from your application
• In builder• Remove widget
• Save application
Widget folder (in server\apps\<app ID>\widgets) is deleted
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
Dependencies/Conflicts
• Include libraries in your widget folder, if required
E.g., jimu.js (subset)
• Watch for conflicts• Style classes
• JavaScript variable/class names
Widget Availability
• If you don’t see your widget in the builder
• Close Web AppBuilder
• Delete the repoitems file
<Web AppBuilder folder>\server\db\repoitems
• Restart the Web AppBuilder server
• Note that this was a bug in earlier versions that should be fixed now
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 return object properties in the widget code:• Single page:
function initializeSelection() {}
• Widget:initializeSelection: function () {}
Advanced Support Tools
See
• Esri 2017 Developer Summit Tech Sessions• Web AppBuilder for ArcGIS Advanced Development
Tools and Techniques
• https://www.youtube.com/watch?v=WpA5ld-EGp4&index=14&t=0s&list=PLaPDDLTCmy4Z844nQ0aFdRCTICoNDPf7E
• 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
Your Turn
Takeaway Messages
David’s Takeaway Messages
• Start very small
• Keep plenty of backups
• Develop clean code
Eric’s Takeaway Messages
• Start with things that already exist
• Make the most of the GeoNET Web AppBuilder Community
• Don’t be afraid to break things
Thanksfor
Coming
http://gispd.com/eventshttp://dhowes.com/presentations
Slides available at:
Top Related