Customizing and Extending ArcGIS WebApp Builder. Moxie Zhang Julie Powell

Transcription

1 Customizing and Extending ArcGIS WebApp Builder Moxie Zhang Julie Powell

2 Topics Introduce WebApp Builder - Quick introduction of ArcGIS WebApp Builder - Configure a ready to use web application WebApp Builder Architecture - Design principles - WebApp Builder components - Key concepts Create Your First Widget - Create a simple widget - Configure the widget - Package the widget Create a Theme - Define WebApp Builder theme - Create a theme - Package the theme Road Ahead - The release plan - What s coming Questions and Answers - Q&A from the team - Your questions

3 ArcGIS WebApp Builder Introduction

4 A Response to the requests by many customers HTML5/no plugin Configurable apps Mobile web apps Less programming

5 Take Advantage of modern HTML/JavaScript technologies Pure HTML/JavaScript Responsive UI for Devices Supports both 2D and 3D

6 For Developers GUI Builder Out of Box Widgets Create Custom Widget Create Custom Theme

7 ArcGIS Platform Integration 3D Web Scenes Support OAuth2 Support Create Web App Templates Builder inside Portal

8 ArcGIS WebApp Builder Architecture Concepts and Components

9 ArcGIS WebApp Builder Components GUI Builder widgets Themes Stem App A Web App config

10 Inside Stem App Messaging (publish/subscribe) Map Manager Widget Manager Panel Manager Layout Manager Config Manager

11 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

12 ArcGIS WebApp Builder Design Goal Simplicity 1 Design / Develop by convention Defaulting everything Object messaging No third party lib besides dojo 2 3

13 ArcGIS WebApp Builder Widget Create your first one

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

15 A minimum Widget Widget.js All widget derived from the BaseWidget class

16 BaseWidget What do you get from BaseWidget? Your job? 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) HTML Template Widget config file Widget name (for css) The guts (i.e. business logic) Localization

17 Events Dijit lifecycle events such as - postcreate - startup - Widget events such as - onopen, onsignin - publishdata -

18 Demo Create your first widget

19 Widgets: Preloaded or in the Panel "inpanel": false "inpanel": true (default)

20 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

21 ArcGIS WebApp Builder Theme Create your first one

22 Define ArcGIS WebApp Builder Theme Branding (icon, color) Preconfigured widget Pre loaded widgets to form the UI items Placeholder as part of App layout for adding More widgets

23 Define ArcGIS WebApp Builder Panel Panel contains widget s content. It determines how widget is shown.

24 Theme Convention and Defaulting images/ icon.jpg layouts/ a-layout-name/ icon.jpg, config.json A Theme panels/ a-panel-name/ images/ styles/ a-style-name/ Panel.js, Panel.html manifest.json

25 Theme Configuration inside the Builder 1 Pick a theme 2 Pick a style of the theme 3 Pick a layout of the theme

26 Demo Create your first theme

27 Releases 2014 TBD Public Release Beta March 28, 2014 Release with 10.3

28 Product FAQ Julie Powell

29 Supported platforms? IE 9+, Firefox, Chrome, and Safari 3+ Is AWAB a supported product? Yes Does AWAB work with Portal? AWAB can rely 100% on Portal for ArcGIS, independent of ArcGIS Online.

30 Can I use my ArcGIS Services in AWAB if I don t have Portal for ArcGIS? WebApp Builder ArcGIS Online WebMap Local ArcGIS Server

31 Product Release Beta Release (March 28th) - Go to Production Release (with 10.3)

32 Q&A

33

34 Make Ready to Use Apps or App Templates Builder Ready to use app App template ArcGIS Portal/Online