Introduce Web AppBuilder for ArcGIS and CustomizationMoxie Zhang – Esri R&D Center Beijing

Web AppBuilder for ArcGIS Released with ArcGIS 10.3

Web AppBuilder Developer Edition Released

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

What is

Web AppBuilderfor ArcGIS

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

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

Configuring Web Apps with ArcGISMany options for using apps to make your map come alive

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

Web AppBuilder for ArcGIS

Quick Tour

WebApp Builder

Architecture

A menu of tools

Shortcut items

Map, of cause

Interactive content

The “player”

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

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

Inside Stem App

MapManager

WidgetManager

PanelManager

LayoutManager

ConfigManager

Messaging (publish/subscribe)

w w w

w w

• Design / Develop by convention

• Defaulting everything

• Object messaging

• No third party app framework besides dojo

Web AppBuilder Design Goal

Simplicity

3

2

1

Web AppBuilder

Widget

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.

A minimum Widget – Widget.js

All widget derived from the BaseWidget class

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

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

WebApp Builder

Theme

Web AppBuilder for ArcGIS:

Customization and Extending

Web AppBuilder for ArcGIS:

Customization and Extending

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

What’s in a ThemeStyle

Layouts Panel (s)

On screen widget place holder position

Theme Widget

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/

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

Web AppBuilder

Community

Developer Community on Githubhttps://github.com/Esri/arcgis-webappbuilder-widgets-themes

Esri GeoNet Group Web AppBuilderhttps://geonet.esri.com/groups/web-appbuilder

Esri GeoNet Group Web AppBuilderhttps://geonet.esri.com/groups/web-app-builder-custom-widgets

GeoNet Group Web AppBuilder Custom Widgets https://geonet.esri.com/groups/web-app-builder-custom-widgets

Facebook Fan Page https://www.facebook.com/webappbuilder4arcgis

And, someone like you… https://github.com/Esri/generator-esri-appbuilder-js

Yoman Generator for WAB

Web AppBuilder for ArcGIS: An

Introduction

Web AppBuilder for ArcGIS: An

Introduction

Web AppBuilder

Developer Edition

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.

Web AppBuilder

Road Ahead

• 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

Q&A

Web AppBuilder for ArcGIS: An

Introduction