Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data...
Transcript of Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data...
![Page 1: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/1.jpg)
Introduce Web AppBuilder for ArcGIS and CustomizationMoxie Zhang – Esri R&D Center Beijing
![Page 2: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/2.jpg)
Web AppBuilder for ArcGIS Released with ArcGIS 10.3
![Page 3: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/3.jpg)
Web AppBuilder Developer Edition Released
![Page 4: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/4.jpg)
Topics
Introduce Web AppBuilder
- Quick introduction of ArcGIS WebApp Builder
- Configure a ready to use web application
Web AppBuilder Architecture
- Design principles
- WebApp Builder components
- Key concepts
Web AppBuilder Widget
- Create a simple widget
- Configure the widget
- Package the widget
Web AppBuilder Theme
- Define WebApp Builder theme
- Create a theme
- Package the theme
Road Ahead and Q&AProduct Information
- Release Schedule
- Frequent Asked Questions
- What the team is working on
- Your questions
![Page 5: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/5.jpg)
What is
Web AppBuilderfor ArcGIS
![Page 6: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/6.jpg)
ArcGIS Is a PlatformEnabling Web GIS Everywhere
Available in the Cloud . . . . . . and On-Premises
Simple
Integrated
Open
Server Online Content and Services
Desktop Web Device
ArcGIS Online
Portal for ArcGIS
![Page 7: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/7.jpg)
Web Apps in ArcGIS
• HTML/JavaScript
• One app that runs on Desktops, Tablets and Phones
• Fully functional
• Manageable
• Developer opportunities
Technology trends and Our Direction
![Page 8: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/8.jpg)
Configuring Web Apps with ArcGISMany options for using apps to make your map come alive
![Page 9: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/9.jpg)
Build for the usersHTML5/no plugin Configurable apps Mobile web apps Less programming
Pure HTML/JavaScript Responsive UI for Devices Supports both 2D and 3D
GUI Builder Out of Box Widgets Create Custom Widget Create Custom Theme
3D Web Scenes Support OAuth2 Support Fully Supported Embedded in Online/portal
Offline Developer Edition Configure and Create Native Mobile Apps and More
![Page 10: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/10.jpg)
Web AppBuilder for ArcGIS
Quick Tour
![Page 11: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/11.jpg)
WebApp Builder
Architecture
![Page 12: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/12.jpg)
A menu of tools
Shortcut items
Map, of cause
Interactive content
The “player”
![Page 13: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/13.jpg)
Web App Builder for ArcGIS Components
v
widgets
Themes
Stem App
A Web App
w w w
w ww w
w w w
config
GUIBuilder
w w w
w w
![Page 14: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/14.jpg)
Widget Theme
• HTML/JavaScript/CSS
• Specific task
• Configuration in JSON
• NLS support
• Builder config UI
• HTML/JavaScript/CSS
• Layout
• Branding
• Widget panel and behavior
• Style (Color, etc.)
• Default widgets
![Page 15: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/15.jpg)
Inside Stem App
MapManager
WidgetManager
PanelManager
LayoutManager
ConfigManager
Messaging (publish/subscribe)
w w w
w w
![Page 16: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/16.jpg)
• Design / Develop by convention
• Defaulting everything
• Object messaging
• No third party app framework besides dojo
Web AppBuilder Design Goal
Simplicity
3
2
1
![Page 17: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/17.jpg)
Web AppBuilder
Widget
![Page 18: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/18.jpg)
Convention and Defaults
A widget could be just one file.
A widget full set of files to provide
Everything from UI, nls to
WebAbb Builer setting UI.
![Page 19: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/19.jpg)
A minimum Widget – Widget.js
All widget derived from the BaseWidget class
![Page 20: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/20.jpg)
BaseWidget
What do you get from BaseWidget?
• App config properties (label, icon, location, etc)
• App config data
• Widget’s config data
• Map object
• Widget state (open, closed, active…)
• Events like open/signin
• Sharing data (widget communication)
Your job?
• HTML Template
• Widget config file
• Widget name (for css)
• The “guts” (i.e. business logic)
• Localization
![Page 21: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/21.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 22: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/22.jpg)
WebApp Builder
Theme
![Page 23: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/23.jpg)
Web AppBuilder for ArcGIS:
Customization and Extending
![Page 24: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/24.jpg)
![Page 25: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/25.jpg)
Web AppBuilder for ArcGIS:
Customization and Extending
![Page 26: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/26.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 27: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/27.jpg)
What’s in a ThemeStyle
Layouts Panel (s)
On screen widget place holder position
Theme Widget
![Page 28: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/28.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 29: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/29.jpg)
Theme Configuration inside the Builder
3
2
1 Pick a theme
Pick a style of the theme
Pick a layout of the theme
Web AppBuilder for ArcGIS: Customization and Extending
![Page 30: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/30.jpg)
Web AppBuilder
Community
![Page 31: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/31.jpg)
Developer Community on Githubhttps://github.com/Esri/arcgis-webappbuilder-widgets-themes
![Page 32: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/32.jpg)
Esri GeoNet Group Web AppBuilderhttps://geonet.esri.com/groups/web-appbuilder
![Page 33: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/33.jpg)
Esri GeoNet Group Web AppBuilderhttps://geonet.esri.com/groups/web-app-builder-custom-widgets
![Page 34: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/34.jpg)
GeoNet Group Web AppBuilder Custom Widgets https://geonet.esri.com/groups/web-app-builder-custom-widgets
![Page 35: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/35.jpg)
Facebook Fan Page https://www.facebook.com/webappbuilder4arcgis
![Page 36: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/36.jpg)
And, someone like you… https://github.com/Esri/generator-esri-appbuilder-js
Yoman Generator for WAB
![Page 37: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/37.jpg)
![Page 38: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/38.jpg)
Web AppBuilder for ArcGIS: An
Introduction
![Page 39: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/39.jpg)
![Page 40: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/40.jpg)
![Page 41: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/41.jpg)
Web AppBuilder for ArcGIS: An
Introduction
![Page 42: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/42.jpg)
![Page 43: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/43.jpg)
Web AppBuilder
Developer Edition
![Page 44: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/44.jpg)
Web AppBuilder for ArcGIS (Developer Edition)Building Apps with Custom Widgets/Themes
• Download Web AppBuilder Developer Edition and host on-premise
- build apps with custom widgets/themes
• Create Web Apps from your own computer.
• Apps created with the developer edition are not automatically
upgraded when you upgrade your portal.
![Page 45: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/45.jpg)
Web AppBuilder
Road Ahead
![Page 46: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/46.jpg)
• Add 3D capability for building Web 3D application
- Support WebScene
- Out of Box widgets for 3D app
- 3D data visualization widgets
• Improve UX for the GUI Builder
• Include solution widget sets
• Add Native Mobile app creation
• …
While continue making Web AppBuilder a simple tool, we will add important capabilities to it
![Page 47: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/47.jpg)
Q&A
Web AppBuilder for ArcGIS: An
Introduction
![Page 48: Introduce Web AppBuilder forArcGIS and Customization · -Out of Box widgets for 3D app-3D data visualization widgets •Improve UX for the GUI Builder •Include solution widget sets](https://reader030.fdocuments.us/reader030/viewer/2022011903/5f0f357e7e708231d44306b3/html5/thumbnails/48.jpg)