![Page 1: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/1.jpg)
Web AppBuilder for ArcGIS:
Customizing and ExtendingMoxie Zhang and Gavin Rehkemper
![Page 2: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/2.jpg)
APPS200000
![Page 3: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/3.jpg)
How did you create apps?
![Page 4: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/4.jpg)
Once upon a time, there was a good app idea …
![Page 5: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/5.jpg)
![Page 6: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/6.jpg)
“Well, that’s not exactly what we wanted…”
$ $$
$
$
$$
$ $
$ $
$
$
$
$
![Page 7: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/7.jpg)
App has changed…tobe
![Page 8: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/8.jpg)
App is no longer the fixed asset
![Page 9: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/9.jpg)
App is disposable
![Page 10: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/10.jpg)
App is a conduit Of understanding your users
![Page 11: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/11.jpg)
App as content
![Page 12: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/12.jpg)
simply, app creation made easier
Builder
![Page 13: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/13.jpg)
Gavin Rehkemper
Introduction
Create a Theme
Moxie Zhang
Create a Widget
Gavin Rehkemper
Introduce Web AppBuilder widgets and
how to create a widget
Agriculture
Invasive Weed
ArcGIS Online WAB Show Case
ArcGIS Online WAB Show Case
Boone County
Muscatine County
ArcGIS Online WAB Show Case
Gavin Rehkemper
WAB Communities
Q&A
Gavin Rehkemper
Moxie Zhang
![Page 14: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/14.jpg)
Web AppBuilder for ArcGIS
Introduction
![Page 15: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/15.jpg)
Samples Configurable Apps & Builders Widgets
Building Web Apps for Your Organization
Using the ArcGIS API for JavaScript
![Page 16: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/16.jpg)
GUIBuilder
widgets
Themes
Stem App
config
An App
App Builder Concept
![Page 17: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/17.jpg)
Widget Theme
• Execution at run time
• Configure-in, not
cut/paste
• Self sufficient and
distributable
• Need container, no
coding block
• Has programing
framework of container
• Applied at run time
• Configure-in, not
modify css
• Need container
• Self sufficient and
distributable
• Has programing
framework of container
![Page 18: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/18.jpg)
Web AppBuilder (Developer Edition)
![Page 19: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/19.jpg)
Building Blocks of Apps
Widgets
![Page 20: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/20.jpg)
Break the code into files
Styles
Scripts
Markuphttps://developers.arcgis.com/javascript/jshelp/intro_custom_dijit.html
Tutorial:
MyWidget.js
MyWidget.css
MyWidget.html
![Page 21: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/21.jpg)
Inheriting from BaseWidget
A widget derived from the BaseWidget class
![Page 22: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/22.jpg)
Dijit lifecycle Widget events
• postCreate
• startup
• …
• onOpen, onActive
• onClose, onDeActive
![Page 23: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/23.jpg)
BaseWidget Your job?
• App properties (name, icon,
localization)
• App config data
• Widget's config data
• Map object
• Widget state (open, closed,
active…)
• Events (open/signIn)
• Widget communication
• Widget UI (HTML/template)
• Widget config file (JSON)
• Widget styles (CSS)
• Localization
• Your unique business logic /
worklows (JavaScript)
![Page 24: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/24.jpg)
Widget Files
MyWidget
Widget.js
css/
images/
nls/
setting/
manifest.json
styles.css
es-es/
…
icon.png
strings.js
config.json
Widget.html
![Page 25: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/25.jpg)
Getting Started…
1. Download developer edition
2. Connect to organization or portal
3. Copy widget template
4. Run the builder
5. Create an app with your widget
6. Build your widget in the app
![Page 26: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/26.jpg)
Configure your custom widget inside the builder
Building a UI for the user
• Setting.js
- Config info
- getConfig, setConfig
• Setting.html
• Usual localization pattern
• css
![Page 27: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/27.jpg)
App in style with personality
Theme
![Page 28: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/28.jpg)
Theme is you
![Page 29: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/29.jpg)
Because you are special
![Page 30: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/30.jpg)
Your apps deserve to
via creating your own theme
![Page 31: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/31.jpg)
A menu of tools
Shortcut items
Map, of cause
Interactive content
The “player”
![Page 32: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/32.jpg)
Branding(icon, color, title)
Widgets on screento form the UI items
Theme Widget:HeaderController
Panel contains widget’s content.It determines how widget is shown.
Placeholder as part of App layout for addingMore widgets
![Page 33: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/33.jpg)
Theme Convention and Defaulting
A Theme
images/
layouts/
panels/
styles/
manifest.json
icon.jpg
a-layout-name/ icon.jpg, config.json
a-panel-name/ images/
Panel.js, Panel.htmla-style-name/
widgets/
![Page 34: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/34.jpg)
Embrace your own style
Create a Theme
![Page 35: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/35.jpg)
My pretty
layout
My cool
color
FF8000
![Page 36: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/36.jpg)
For you and by you
Community
![Page 37: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/37.jpg)
Documentation
Online help documentation
http://doc.arcgis.com/en/web-appbuilder
Developer Edition help documentation
http://developers.arcgis.com/web-appbuilder
![Page 38: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/38.jpg)
https://geonet.esri.com/community/gis/web-gis/web-appbuilder
https://geonet.esri.com/groups/web-app-builder-custom-widgets
![Page 39: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/39.jpg)
https://training.esri.com
![Page 40: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/40.jpg)
Other Online Resources
• Esri Solutions Widgets:
- https://github.com/Esri/solutions-webappbuilder-widgets
• Lists of Widgets:
- http://codesharing.arcgis.com/
- http://esri-es.github.io/Web-AppBuilder-Custom-Widgets/
- https://github.com/gavinr/wab-widget-search
• “Awesome ArcGIS” https://github.com/hhkaos/awesome-arcgis
![Page 41: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/41.jpg)
Road Map
![Page 42: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/42.jpg)
Improve cost effectiveness of app creation
Shorten the app-to-value cycle for end users
The Path
![Page 43: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/43.jpg)
conception
program
configure
test
deployuse
track
revise
analyze
retire
design
App
Lifecycle
![Page 44: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/44.jpg)
Evolving a tool to be a system to manage the full App lifecycle
Tool
app
System
Creator
User
app
User
Creator
Developer Admin
![Page 45: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/45.jpg)
BuilderUX
Extensions Assets Resources
App
widgets
app as content is the central point of the system
Themesimages
iconsicons maps
App Lifecycle Management
![Page 46: Web AppBuilder for ArcGIS: Customizing and Extending · Web AppBuilder for ArcGIS: Customizing and Extending Moxie Zhang and Gavin Rehkemper](https://reader031.vdocuments.mx/reader031/viewer/2022013003/5f5a702e37c88e2f0129a434/html5/thumbnails/46.jpg)