web appbuilder for arcgis: an introduction · title: web appbuilder for arcgis: an introduction...
TRANSCRIPT
![Page 1: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/1.jpg)
Web AppBuilder for ArcGIS:
An Introduction
Jianxia Song
David Martinez
![Page 2: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/2.jpg)
Copyright © Esri. All rights reserved.
Create web apps
![Page 3: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/3.jpg)
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
![Page 4: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/4.jpg)
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
![Page 5: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/5.jpg)
Copyright © Esri. All rights reserved.
Web AppBuilder live sites showcase
• ArcGIS Online group
⎻ Organizations and individuals can promote their apps
Web AppBuilder for ArcGIS
![Page 6: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/6.jpg)
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
![Page 7: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/7.jpg)
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
![Page 8: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/8.jpg)
Creating an App
![Page 9: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/9.jpg)
Copyright © Esri. All rights reserved.
Adding functionality with widgets
![Page 10: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/10.jpg)
Copyright © Esri. All rights reserved.
2D widgets
• Foundation
⎻ Navigation
⎻ Filter
⎻ Query
⎻ Search
⎻ Bookmark
⎻ Geocode
⎻ Legend
⎻ Swipe
⎻ Geoprocessing
⎻ Edit
⎻ Infographic
![Page 11: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/11.jpg)
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
![Page 12: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/12.jpg)
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
![Page 13: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/13.jpg)
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
![Page 14: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/14.jpg)
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
![Page 15: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/15.jpg)
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
![Page 16: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/16.jpg)
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
![Page 17: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/17.jpg)
2D Widgets
![Page 18: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/18.jpg)
Copyright © Esri. All rights reserved.
3D widgets
• Navigation
• Compass
• Measurement
• Coordinates
• Slides
• Share
• Basemap Gallery
• Daylight
• 3DFx
![Page 19: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/19.jpg)
3D Widgets
![Page 20: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/20.jpg)
Copyright © Esri. All rights reserved.
Web app customization
![Page 21: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/21.jpg)
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
![Page 22: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/22.jpg)
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
![Page 23: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/23.jpg)
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
?
?
![Page 24: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/24.jpg)
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
![Page 25: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/25.jpg)
Copyright © Esri. All rights reserved.
ArcGIS Enterprise
Add a custom widget
![Page 26: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/26.jpg)
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)
![Page 27: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/27.jpg)
Extending
![Page 28: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/28.jpg)
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
![Page 29: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/29.jpg)
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
![Page 30: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/30.jpg)
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”
![Page 31: Web AppBuilder for ArcGIS: An Introduction · Title: Web AppBuilder for ArcGIS: An Introduction Author: Esri Subject: 2018 Esri User Conference Presentation Keywords: 2018 Esri User](https://reader031.vdocuments.us/reader031/viewer/2022012921/5f35478e67ba4240e969816f/html5/thumbnails/31.jpg)