1. Web AppBuilder for ArcGIS
Chapter 3
Web AppBuilder for ArcGIS
Instructor
These slides are for Getting to Know Web GIS, third edition (Esri Press 2018)

2. Chapter objectives
Know why and when you need Web AppBuilder for ArcGIS.
Understand the types of widgets and themes of Web AppBuilder.
Learn the workflow to create web apps using Web AppBuilder.
Configure and use charting, filtering, and other widgets.
This chapter is long. It can be split into two meetings:
One focuses on ArcGIS Online standard analysis tools
The other focuses on custom web tools (i.e. geoprocessing services) and big data tools (i.e. GeoAnalytics tools)
Getting to Know Web GIS, third edition

3. ArcGIS Online / ArcGIS Enterprise Client apps
Data sources
ArcGIS Online / ArcGIS Enterprise
Client apps
CSV files
Shapefiles
KMLs
File geodatabases
Enterprise geodatabases
Database management systems
Imagery
Drone images
Sensor and real-time data
Big data
Layers in portal
Feature layers
Raster tile layers
Vector tile layers
Scene layers
Map image layers
Web tools/geoprocessing services
Image layers
Stream services
Geometry services
Living Atlas of the World
Server object extension
Server object interceptor
Ready-to-use apps and configuration templates
Configurable app templates
Story Maps
Web AppBuilder
Operations Dashboard
Solutions apps
Insights
Collector, Survey123, Explorer, and Navigator
Workforce
AppStudio
ArcGIS Earth
ArcGIS Indoors viewers
ArcGIS VR 360
Web
maps/
scenes
Web AppBuilder
ArcMap
ArcGIS Pro
Drone2Map
CityEngine
Chapter 3
Custom apps
ArcGIS API for JavaScript
ArcGIS Runtime SDKs
ArcGIS API for Python

4. The need for Web AppBuilder for ArcGIS
Need more functions than those of the app templates?
Wish to remix multiple app templates?
Compared with the app templates, Web AppBuilder.
Provides more functions
Provides larger variety of user interfaces
Allows more flexible configuration of functions and user interface
is customizable and extensible
Live Sites Showcase.
Getting to Know Web GIS, third edition

5. Basics of Web AppBuilder for ArcGIS
A web client for ArcGIS Online and Portal for ArcGIS
Works with web maps
Built on HTML5 and ArcGIS API for JavaScript
Provides configurable widgets and themes
Comes with numerous out-of-the-box widgets and themes
apps can be created without coding
Creates pure HTML and JavaScript apps without coding
The apps do not require plug-ins and run on any device.
Provides a framework for developers to create custom widgets and themes
Getting to Know Web GIS, third edition

6. Configure apps interactively, preview immediately
Design pane
Preview pane
What you see if what you get
What you see is what you get

7. Editions of Web AppBuilder
Within ArcGIS Online or Portal for ArcGIS
Embedded in the website
Activated from the map/scene viewer or Content page
Developer Edition
Separate download and installed locally
Sign into ArcGIS Online or Portal for ArcGIS
Support for custom widgets and themes
Both offer the same “builder” user experience, same capabilities
Getting to Know Web GIS, third edition

8. Access to Web AppBuilder
Ways to launch the embedded version:
The map viewer
Gallery
Content
Live Sites Showcase.
Getting to Know Web GIS, third edition

9. Using Web AppBuilder to create web apps
Pick style
Select map or scene
Add widgets
Configure attributes
Preview and launch
Behind the scene,
Web AppBuilder generates the configuration files for you automatically
The configuration files are in JavaScript Object Notation (JSON) format
Getting to Know Web GIS, third edition

10. Widgets
A JavaScript/HTML component that encapsulates a set of focused functions.
Most widgets have a visual user interface.
Most widgets have configuration options.
Types of widgets:
Data-independent widgets: little to no configuration
Examples: Basemap Gallery, Measure, Bookmark
Data-dependent widgets: detailed configuration specific to layers in the map
Examples: Query, Chart
Getting to Know Web GIS, third edition

11. Available widgets for 2D web apps
Enable core web mapping application capabilities
Getting to Know Web GIS, third edition

12. Foundation widgets Navigation Query Search Geocoding Editing
Geoprocessing
Printing
Legend
Layer list
Overview map
Attribute
Add data
Select

13. Solution widgets Batch Attribute Editing Grid Overlay Group Filter
Info Summary
Near Me
Parcel Drafter
Reviewer Dashboard
Screening
Smart Editor
Suitability Modeler

14. Available widgets for 3D web apps
3D enabled widgets
Some widgets rebuilt to work with 3D content

15. Themes
A theme includes a collection of panels, styles, layouts, and pre-configured widgets.
Getting to Know Web GIS, third edition

16. Run 2D apps on any device
Getting to Know Web GIS, third edition

17. Web apps created with Web AppBuilder Online and Portal edition
Apps are hosted in ArcGIS Online or Portal for ArcGIS.
Become items in App author’s My Contents.
Option to download the app from Item Details page.
Customize web app.
Host in your own web server.
ArcGIS Online
Portal for ArcGIS
Production
web server
Web app1
Web app2
Web app2 A
Getting to Know Web GIS, third edition

18. Web AppBuilder Developer edition
Deploy to your computer.
Download and install.
Register with ArcGIS Online or Portal.
Can create web apps without coding
Similar to the Online and Portal editions
Apps hosted in your own web server
Allows you to download and use custom widgets
Allows developers to create custom widgets and themes
Getting to Know Web GIS, third edition

19. Tutorial
Web AppBuilder for ArcGIS
Create a web app that displays data on historic earthquakes and hurricanes to the public.
Finished product sample available here:
Link to app
Getting to Know Web GIS, third edition

20. Tutorial The web app should have the following capabilities:
Web AppBuilder for ArcGIS
The web app should have the following capabilities:
Zoom to United States in its initial view.
Provide bookmarks so that users can quickly zoom to predefined areas.
Allow users to print displays as PDFs.
Allow users to chart and compare selected attributes of selected earthquakes.
Allow users to query for features based on their attributes.
Display appropriate logo, title, subtitle, and links in the banner.
App requirements
Getting to Know Web GIS, third edition

21. Tutorial demo
Sample data for this demo is available at
Getting to Know Web GIS, third edition

22. Summary
Web AppBuilder for ArcGIS
Web AppBuilder is more flexible and powerful than most other web app templates.
Web AppBuilder for ArcGIS is a part of ArcGIS Online and Portal for ArcGIS.
Works with web maps
Respects the sharing settings of the web map and the layers used
Web AppBuilder provides 70+ widgets and many themes that can be flexibly combined and configured to create web apps.
Pick a style -> select a web map -> Add and configure widgets -> Configure attributes
Developer edition allows the use and creation of custom widgets/themes.
Getting to Know Web GIS, third edition

23. Assignment Build a web app using Web AppBuilder for ArcGIS.
The initial map extent should zoom to your study area.
The app should have the following capabilities:
Provide bookmarks that allow users to quickly zoom to predefined areas.
Let users print their maps as PDFs.
Enable users to chart selected features with selected attributes.
Allow users to query for features based on multiple attributes.
Display the appropriate logo, title, subtitle, and links in the banner.
Getting to Know Web GIS, third edition

24. Reading: Chapter 3, Getting to Know Web GIS, third edition
Questions?
Reading: Chapter 3, Getting to Know Web GIS, third edition
Getting to Know Web GIS, third edition