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: