Moxie Zhang

@theMoxie

Sajit Thomas

@SpatialAgent

WEB APPBUILDER FOR ARCGIS

BUILDING 3DAPPS

Web App Builder: Tool to build apps

20000APPS

0

Web App Builder: Building apps through configuration

Web App Builder: Modular approach through widgets

Web App Builder: Focused business logic within widget

Web App Builder: 3D Apps

Web App Builder: Developer Edition

• Download Web AppBuilder Developer Edition and host on-premises

• Create Web Apps from your own computer

• Build custom widgets and themes

Architecture

Web App Builder:

When you have a good app idea…

App

This has been changed….

• Design / Develop by convention

• Defaults for everything

• Object messaging

• No third party app framework besides dojo

Simplicity

3

2

1

v

Widgets

Themes

Stem App 3D

A Web App

w w w

w ww w

w w w

config

GUI

Builder

w w w

w w

Map

Manager

Widget

Manager

Panel

Manager

Layout

Manager

Config

Manager

Messaging (publish/subscribe)

w w w

w w

Web App Builder: Stem App 3D

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

3D Scene 3D Vis

• Model of real world

• Model of real objects

• Simulation of physics

• Asset management

• Urban planning

• Abstract data

• Real time data

• Operational data

• Analysis with dimensions

• Time and animations

Web App Builder:

Building a 3D Widget

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 3D:

[web-appbuilder-root]\client\stemapp3d\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 3d widgets folder

Web App Builder: Getting Started

Web App Builder: Widget Conventions

Stem App 3D

Widgets

MyWidget

MyWidget

css

images

nls

setting

config.json

manifest.json

Widget.html

Widget.js

Web App Builder Widget: Extending Base Widget

BaseWidget Your widget

• App properties

(name, icon, localization)

• App config data

• Widget config data

• Scene View 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 / workflow

Web App Builder Widget: Inheriting from Base Widget

Dijit lifecycle Widget events

• postCreate

• Startup

• …

• onOpen, onSignin

• publishData

Working with Web Scenes: Layers

Working with Web Scenes: Animation

3D Fx

Web App Builder:

Web App Builder: 3DFx – Data Visualization Widget

Operational Layers Configurable Widget

3DFx Library

3DFx JavaScript Library ArcGIS JavaScript API 4.0

FxLayer

Properties:

url

visible

vizType

vizFields

displayField

renderingInfo

popupTemplate

…

Methods:

startAnimation

pauseAnimation

showLabel

hideLabel

switchVizField

……

Map

Rendering System

SceneView

Web App Builder: 3DFx – Architecture

Working with 3DFx: Rendering Information

Working with 3DFx: Fx Layer

Road Ahead

Web App Builder:

Web App Builder: Road Ahead

Web App Builder: Road Ahead

Portal:EAP2

Online:3.5beta

Developer: beta

Portal:10.3

Online:3.6

Developer:1.0

Portal:10.3.1

Online:3.7

Developer:1.1

Portal:10.4

Online:3.8,3.9,3.10, 4.1

Developer:1.2,1.3, Beta2.0

2013 Sep

2014

Dec

2014

Mar

2015Now

milestones

• Online help documentation

http://doc.arcgis.com/en/web-appbuilder/

• Developer Edition help documentation

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

• Esri GeoNet Group Web AppBuilder

https://geonet.esri.com/groups/web-appbuilder

• 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

http://training.esri.com/gateway/index.cfm?fa=catalog.webCourseDetail&courseid=2893

Web App Builder: Resources

Download the Esri Events app and go to DevSummit

Select the session you attended Scroll down to the “Feedback” section

Complete Answers,add a Comment,

and Select “Submit”

Web App Builder: Survey

Moxie Zhang

@theMoxie

Sajit Thomas

@SpatialAgent