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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 https://geonet.esri.com/groups/web-app-builder-custom-widgets/ https://github.com/Esri/solutions-webappbuilder-widgets https://github.com/Esri/WAB-Image-Services-Widgets Allows developers to create custom widgets and themes Getting to Know Web GIS, third edition

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: http://esripressbooks.maps.arcgis.com/apps/MapTour/index.html?appid=1b1284bd3d6c4558a97eedf4a97d464dandwebmap=d1bde17312a7469ea8efdb47d75481c4 Link to app Getting to Know Web GIS, third edition

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

Tutorial demo Sample data for this demo is available at http://esripress.esri.com/bookResources/index.cfm?event=catalog.bookandid=27 Getting to Know Web GIS, third edition

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

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

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