![Page 1: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/1.jpg)
Building Web AppBuilder Widgets
Esri GeoDev Meetup
Boise, Idaho
October 10, 2017
David Howes, Ph.D.
David Howes, LLC
dhowes.com
![Page 2: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/2.jpg)
Web AppBuilder
![Page 3: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/3.jpg)
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
![Page 4: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/4.jpg)
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
![Page 5: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/5.jpg)
Query Widget
![Page 6: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/6.jpg)
Exploration Widget
![Page 7: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/7.jpg)
Exploration Widget
![Page 8: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/8.jpg)
Exploration Widget
![Page 9: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/9.jpg)
Exploration Widget
![Page 10: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/10.jpg)
Countermeasures Widget
![Page 11: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/11.jpg)
Countermeasures Widget
![Page 12: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/12.jpg)
![Page 13: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/13.jpg)
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
![Page 14: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/14.jpg)
![Page 15: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/15.jpg)
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
![Page 16: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/16.jpg)
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
![Page 17: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/17.jpg)
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)
![Page 18: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/18.jpg)
Acknowledgements
• Seattle Department of Transportation - Client
• Toole Design Group - Prime Contractor
• Mike Murnane - City of Tacoma
![Page 19: PowerPoint Presentationgispd.com/Documents/Esri GeoDev Meetup, 20171010... · Title: PowerPoint Presentation Author: matt Created Date: 10/19/2017 8:48:59 PM](https://reader034.vdocument.in/reader034/viewer/2022052016/602f39b7c5f2ca19b900ac14/html5/thumbnails/19.jpg)
Thanksfor
Coming
http://gispd.com/eventshttp://dhowes.com/presentations
Slides available at: