Upptäck Web AppBuilder

Anders Hillström

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

Create Your First Widget

- Create a simple widget

- Configure the widget

- Package the widget

Themes

- Define WebApp Builder theme

- Architecture

Road Ahead and Q&AWeb AppBuilder Community

- Release Schedule

- Frequent Asked Questions

- What the team is working on

- Your questions

Web AppBuilder

Introduction

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

Web AppBuilder for ArcGIS:

Customization and Extending

Web AppBuilder for ArcGIS:

Customization and Extending

Web AppBuilder for ArcGIS:

Customization and Extending

Web AppBuilder for ArcGIS: An

Introduction

What if you want to

customize it?.....

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

Architecture

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

Inside Stem App

MapManager

WidgetManager

PanelManager

LayoutManager

ConfigManager

Messaging (publish/subscribe)

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.)

• Theme widgets

• Design / Develop by convention

• Defaulting everything

• Object messaging

• No third party app framework besides dojo

Web AppBuilder Design Goal

Simplicity

3

2

1

Dojo?• dojotoolkit.org

Create a Web AppBuilder

Widget

Inheriting from BaseWidget

A widget derived from the BaseWidget class

What Do You Mean "Widget"?

Samples have all code inline in one page: Styles

Scripts

Markuphttps://developers.arcgis.com/javascript/jshelp/intro_custom_dijit.html

Tutorial:

Widget Convention and Defaulting

A Widget

Widget.js

css/

images/

nls/

setting/

manifest.json

styles.css

es-es/

…

icon.png

strings.js

config.json

Widget.html

BaseWidget Your job?

• App properties (name, icon,

localization)

• App config data

• Widget's config data

• Map object

• Widget state (open, closed,

active…)

• Events (open/signIn)

• Widget communication

• Widget UI (HTML/template)

• Widget config file

• Widget styles (css)

• Localization

• Your unique business logic /

worklows

Dijit lifecycle Widget events

• postCreate

• Startup

• …

• onOpen, onSignin

• publishData

Getting Started

1. Download: https://developers.arcgis.com/web-appbuilder/

2. Connect to portal and set app id, see:

https://developers.arcgis.com/web-appbuilder/guide/getstarted.htm

3. Copy widget folder from template or other widget to stem app:

[web-appbuilder-root]\client\stemapp\widgets\

4. Create an app, load your widget

5. Build your widget in the app

6. When done, copy widget files back to stem app widgets folder

DemoCreate your first widget

Create a Web AppBuilder

Theme

A menu of tools

Shortcut items

Map, of cause

Interactive content

The “player”

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 Theme

Style

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

Demo

Theme

Web AppBuilder

Community

Web AppBuilder for ArcGIS Resources

• Online help documentationhttp://doc.arcgis.com/en/web-appbuilder/

• Developer Edition help documentationhttps://developers.arcgis.com/web-appbuilder/guide/xt-welcome.htm

• Esri Live Training Seminar: Get Started with Web AppBuilder for ArcGIS (60 mins)http://training.esri.com/gateway/index.cfm?fa=catalog.webCourseDetail&courseID=2887

• Esri Live Training Seminar: Creating Web Applications Using Templates and Web AppBuilder for ArcGIShttp://training.esri.com/gateway/index.cfm?fa=catalog.webCourseDetail&courseid=2893

Esri GeoNet Group Web AppBuilder

https://geonet.esri.com/community/gis/web-gis/web-appbuilder

GeoNet Group Web AppBuilder Custom Widgets

https://geonet.esri.com/groups/web-app-builder-custom-widgets

Developer Community on GithubSharing and Collaborating

Esri Solutions Team – Custom Widgetshttps://github.com/Esri/solutions-webappbuilder-widgets

And, someone like me…

https://github.com/Esri/generator-esri-appbuilder-js

http://video.esri.com/watch/4568/arcgis-web-appbuilder-development-tools-and-

techniquesYoman Generator for WAB

Web AppBuilder

Road Ahead

Web 3D with Web AppBuilder

• Support latest Javascript API with 3D support

• Support Web Scene

• A set of 3D Widgets

• Support smart map for 3D, “3D Expression”

• Widget development for Web 3D

Native Mobile App with Web AppBuilder

• Configure and build native mobile apps

• Based on ArcGIS Runtime SDK

• A set native widgets and themes for iOS and Android

• Support coming Runtime 3D that consumes Web Scenes published to Online and Portal

• Native mobile widget and theme development on iOS and Android

More themes and widgets

• Solution widgets set

• Imagery processing widgets set

• 3D oriented widgets

• More themes with responsive design

• Simplified theme creation

Mar 2015

Jun 2015

Releases

Online 3.7

Online 3.x

Sept 2015

Dec 2015

Online 3.x

Online 3.x