Web AppBuilder for ArcGIS:JavaScript Apps Made Easy

Moxie Zhang and Derek LawMarch 10th, 2015

Esri Developer Summit 2015

Web AppBuilder for ArcGIS first Released with ArcGIS 10.3

Web AppBuilder Developer Edition Released

Minnesota DNR

Washington Suburban Sanitary CommissionMunicipality of Mjolby, Sweden

The Vermont Agency of Transportation

Iowa DOT

The South Corsica DOT

Product Overview

What’s New – March 2015

Web AppBuilder Tour

Developer Opportunities

Road Ahead and Q&A

Resources and Community

Derek Law

Web AppBuilder

Product Overview

The ArcGIS Platform enables Web GISEnabling GIS Everywhere

Available in the Cloud . . . . . . and On-Premises

Simple

Integrated

Open

Desktop Web Device

Server Online Content and Services

portal

A

Creating web apps with ArcGIS

ArcGIS Web Application Templates

Web Map

Web AppBuilder for ArcGIS Create new web apps without programming

20+ widgets

Web AppBuilder for ArcGIS

• New functionality within ArcGIS Online and Portal for ArcGIS- ArcGIS Online since Dec 2014

- Portal for ArcGIS in 10.3

• Enables new apps to be created without coding- Interactive WYSIWYG UE

- Deploy to web browsers and mobile devices

• Fully integrated with the ArcGIS Platform

• Built with ArcGIS API for JavaScript and HTML 5 technology

• Extensible

Web AppBuilder for ArcGIS

• New functionality within ArcGIS Online and Portal for ArcGIS- ArcGIS Online since Dec 2014

- Portal for ArcGIS in 10.3

• Enables new apps to be created without coding- Interactive WYSIWYG UE

- Deploy to web browsers and mobile devices

• Fully integrated with the ArcGIS Platform

• Built with ArcGIS API for JavaScript and HTML 5 technology

• Extensible

2 Options to Work with Web AppBuilder

1. Within ArcGIS Online or Portal for ArcGIS- Embedded in the web site

- Activate from the map viewer or My Contents

2. Developer Edition- Separate download and installed locally

- Sign into ArcGIS Online or Portal for ArcGIS

- Support for custom widgets, panels, and themes

-

• Both offer the same “builder” user experience, same capabilities

Workflow for Creating a new App

Available Widgets

• Widget: a chunk of code that can be added in a modular fashion, provides functionality

• 20 + available on first release

• They cover core web mapping application capabilities

ing

Leverage your organization’s Utility Services

• ArcGIS Online or Portal for ArcGIS

• Organization settings panel

Locators Basemaps Print services

Creating new Web Apps

• Apps created with Web AppBuilder are hosted in your ArcGIS organization- ArcGIS Online or Portal for ArcGIS

- Apps are listed in user’s My Content

• You can download the code for the Web app and host in your own web server

ArcGIS OnlinePortal for ArcGIS

Web App1 Web App2

ProductionWeb Server

Web App2

A

Derek Law

Web AppBuilder

Tour

Derek Law

Web AppBuilder

March Update

Some Highlights of What’s New (ArcGIS Online March Update)

Analysis widget Time slider widget Swipe widgetSupport for

related records

A

Analysis Widget

• Enables access to the ArcGIS Online spatial analysis tools in your application

• Support for 22 analysis capabilities

• Will use credits to execute operations

Analysis Widget

• Must run on publically accessible data

Time Slider Widget

• Enables display and viewing of temporal layers in a map

• Can “play” a sequence of time data; control animation

Time Slider Widget

• Enables display and viewing of temporal layers in a map

• Can “play” a sequence of time data; control animation

Swipe Widget

• Enables comparison of different layers in a map

• Horizontal, vertical, and spyglass view modes

Support for related records

• Enabled in the Attribute Table and Query Widgets

• Also in the pop-up window

Other Items in ArcGIS Online March Update

• Support for feature search based on search configuration in web map

• Support for customizing map’s visible scales

• Support for using URL parameters for the app

• Enhancement to Layer List with enable/disable pop-up option- New type support including table, raster and image service layers

• Enhancements to Overview Map, Draw, and Geoprocessing widgets

• Support for Greek language

Web AppBuilder Developer Edition

• Download and install locally- Sign into ArcGIS Online or Portal for ArcGIS

- Same user “builder” experience as embeddedWeb AppBuilder

- Work with custom widgets, panels, and themes

• Create web apps on your own computer

• Apps created with the Developer Edition are NOT automatically upgraded when you upgrade your portal

Moxie Zhang

Web AppBuilder

for Developers

For Developers

GUI Builder Out of Box Widgets Create Custom Widget Create Custom Theme

to be more productive and focused

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 w w w

w w w

config

GUIBuilder

w w w

w w

Define “Widget”

• A functional class of tool than interactive local and remote data

• A widget requires a container to become a widget instance at run time

• Without involving IDE, compiler or any programming mean, a widget can be load/configured into the container for execution at run time

• A widget is at higher level of granularity comparing to programming components such as COM, OLE, Java bean or Dojo digit, which requires development (programming) at design time to add to an application

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

• 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 for ArcGIS: An

Other Web AppBuilder Sessions

ArcGIS Web AppBuilder: Customizing and Extending 3/11 4:00PM Wednesday 3/13 1:00PM Thursday

Web AppBuilder Developer Tools and Techniques3/13 9:30AM Thursday

Derek Law

Web AppBuilder

Resources & 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)

• Coming soon: Creating Web Applications Using Templates and Web AppBuilder for ArcGISWeb course (2-4 hours)

GeoNet – Esri Community

• 2 places

Custom Widgets on GeoNethttps://geonet.esri.com/groups/web-app-builder-custom-widgets

GitHub: Web AppBuilder Developer Community

Esri Solutions Team – Custom Widgets

https://github.com/Esri/generator-esri-appbuilder-jsTom Wayson’s Yoman Generator for WAB

Moxie Zhang

Web AppBuilder

Road Ahead

keep it simple

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

Road Ahead Session

The Road Ahead: Web 3D and Native Mobile Apps3/13 10AM - 11AM Thursday

Primrose C/D

More themes and widgets

• Solution widgets set

• Imagery processing widgets set

• 3D oriented widgets

• More themes with responsive design

• Simplified theme creation

Mar 2015Jun 2015

Releases

Online 3.7

Online 3.x

Sept 2015

Dec 2015

Online 3.x

Online 3.x

Rate This Sessionwww.esri.com/RateMyDevSummitSession