Web AppBuilder for ArcGIS:

An Introduction

Jianxia Song

David Martinez

Copyright © Esri. All rights reserved.

Create web apps

Copyright © Esri. All rights reserved.

Web AppBuilder for ArcGIS

• Create new apps without coding

⎻ Interactive WYSIWYG user experience

⎻ 2D and 3D apps

⎻ 2D apps run in the browser on any device

• Integrated with the ArcGIS Platform

• Built with ArcGIS API for JavaScript / HTML5

⎻ Extensible

Copyright © Esri. All rights reserved.

Web AppBuilder for ArcGIS editions

• ArcGIS Online and Enterprise

⎻ Embedded in the website

• Developer edition

⎻ Download and install locally

⎻ Sign in to ArcGIS Online / Enterprise

ArcGIS Online ArcGIS Enterprise

Copyright © Esri. All rights reserved.

Web AppBuilder live sites showcase

• ArcGIS Online group

⎻ Organizations and individuals can promote their apps

Web AppBuilder for ArcGIS

Copyright © Esri. All rights reserved.

• Use web maps and web scenes

⎻ Create and share your content

⎻ Integrate ArcGIS Living Atlas of the World content

• Configure utility services

Preparing content for your apps

Utility services

Geocoding

Directions and Routing

Printing

ArcGIS Online

ArcGIS Enterprise

Apps

Web map

Living Atlas

Copyright © Esri. All rights reserved.

Workflow: Creating a new app

Preview

and

Launch

Theme Widget AttributeMapApp

Purpose

Tools

Title, Logo, Links2D or 3D

Style and Layout

Creating an App

Copyright © Esri. All rights reserved.

Adding functionality with widgets

Copyright © Esri. All rights reserved.

2D widgets

• Foundation

⎻ Navigation

⎻ Filter

⎻ Query

⎻ Search

⎻ Bookmark

⎻ Geocode

⎻ Legend

⎻ Swipe

⎻ Geoprocessing

⎻ Edit

⎻ Infographic

Copyright © Esri. All rights reserved.

2D widgets

• Solutions

⎻ Near me

⎻ Smart Editor

⎻ Grid Overlay

⎻ Screening

⎻ Public Notification

⎻ Situation Awareness

⎻ Parcel Drafter

⎻ Suitability Modeler

⎻ Info Summary

⎻ District Lookup

⎻ Emergency Response Guide

Copyright © Esri. All rights reserved.

Filter

• Apply expressions to filter map features

⎻ Single expression or a set (multiple)

⎻ Supports relative dates

⎻ Multi-selection

• Filter options

⎻ Remove preset filters from the map

⎻ Apply filter when widget is opened

⎻ Zoom to layer after filter is applied

⎻ Allow custom filters

Copyright © Esri. All rights reserved.

Near Me

• Locate features within a buffer area

⎻ Address or location

• Near Me options

⎻ Search source settings

⎻ Draw selected search layer results

⎻ Max results to return

⎻ Get directions

Copyright © Esri. All rights reserved.

Edit

• Create, update, and delete features and attributes

⎻ Support editing related tables

• Editor options

⎻ Merge, cut, reshape and undo/redo

⎻ Apply edits to attributes using Save button

⎻ Enable geometry edit by default when geometry is moved

Copyright © Esri. All rights reserved.

Infographic

• Visualize and monitor attributes and statistical data

⎻ 16 graphic templates

⎻ Dynamic refresh when map or data source changes

⎻ Works with Filter and Select widgets

Copyright © Esri. All rights reserved.

App configuration

• Subscriber content access

⎻ ArcGIS Online premium content

⎻ Set request limits

• Extra data sources

⎻ Custom data for widgets

⎻ Layers from map, ArcGIS Online, service

2D Widgets

Copyright © Esri. All rights reserved.

3D widgets

• Navigation

• Compass

• Measurement

• Coordinates

• Slides

• Share

• Basemap Gallery

• Daylight

• 3DFx

3D Widgets

Copyright © Esri. All rights reserved.

Web app customization

Copyright © Esri. All rights reserved.

Web app customization options

• Add custom widgets

⎻ Developer edition or Enterprise

• Add custom themes

⎻ Styles, layouts, panels

• Export app templates

⎻ 2D or 3D

?

Widgets

Themes Templates

Copyright © Esri. All rights reserved.

Install Web AppBuilder for ArcGIS Developer Edition

1. Check system requirements

2. Download and extract Developer Edition

3. Start Developer Edition

4. Connect to a portal

Copyright © Esri. All rights reserved.

Web AppBuilder for ArcGIS Developer Edition

Add a custom widget

1. Find widgets shared by the user community

2. Download and extract a widget

3. Integrate the widget with Web AppBuilder

?

?

Copyright © Esri. All rights reserved.

ArcGIS Enterprise

Add a custom widget

1. Deploy widget to web server

2. Register widget with portal⎻ Application Extension (App Builder)

3. Integrate widget with Web AppBuilder⎻ Share widget with app builders Everyone

portal

App builders

Copyright © Esri. All rights reserved.

ArcGIS Enterprise

Add a custom widget

Copyright © Esri. All rights reserved.

Community resources

• GeoNet

⎻ Product community: Web AppBuilder for ArcGIS

⎻ Developer Group: Web AppBuilder Custom widgets

⎻ Developer Group: Web AppBuilder Custom themes

• GitHub

⎻ Esri Solutions team widgets

⎻ Esri Raster team widgets (Image services)

Extending

Copyright © Esri. All rights reserved.

What we have added so far this year

• New widgets for public safety and local government

⎻ Emergency Response Guide (ERG)

⎻ Gridded Reference Graphics (GRG)

⎻ Distance and Direction

⎻ Data Aggregation (Beta)

⎻ Cost Analysis

• New 3D theme and widgets

⎻ Dashboard theme

⎻ Measurement

⎻ Share

Copyright © Esri. All rights reserved.

What we have added so far this year

• Major enhancements on the existing widgets

⎻ Filter multi-selection for a single field

⎻ Set relative time span to animate live data

⎻ Edit related features and many-to-many related records

⎻ Swipe multi-layer at a time

⎻ View charts with line and area markers as guidelines

⎻ Support Arcade pop-ups in Public Notification

⎻ Smart Editor enables you

⎻ edit related layers and tables

⎻ define attribute actions for the data

⎻move a point feature to manually entered coordinates or GPS location

Copyright © Esri. All rights reserved.

Please Take Our Survey on the App

Download the Esri Events

app and find your event

Select the session

you attended

Scroll down to find the

feedback section

Complete answers

and select “Submit”