Building Web AppBuilder Widgets

Esri GeoDev Meetup

Boise, Idaho

October 10, 2017

David Howes, Ph.D.

David Howes, LLC

dhowes.com

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

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

Widget Folders

• A Web AppBuilder widget is a collection of files in a folder

• Two key folder locations

• Client - the source for any application

<Web AppBuilder folder>\client\stemapp\widgets

• Server - specific application

<Web AppBuilder folder>\server\apps\<app ID>\widgets

• Develop in client, sync with server

Widget Availability

If you don’t see your widgets in the builder

• Close Web AppBuilder

• Delete <Web AppBuilder folder>\server\db\repoitems

• Restart the Web AppBuilder server

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

Development Strategy

• 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

• Watch for dependencies/conflicts• Style classes

• JavaScript variable/class names

• Include libraries in your widget folder, if requiredE.g., jimu.js (subset)

Acknowledgements

• Seattle Department of Transportation - Client

• Toole Design Group - Prime Contractor

• Mike Murnane - City of Tacoma

Thanksfor

Coming

http://gispd.com/eventshttp://dhowes.com/presentations

Slides available at: