Agenda

What is it?
Customization

Web App Builder

What is it?

Web AppBuilder for ArcGIS is an intuitive what-you-see-is-what-you-get (WYSIWYG) application that allows you to easily build web applications without writing a single line of code. It includes powerful tools to configure fully featured HTML web applications. As you add your map and tools, you can visually see them in the app and use them right away. Think of it as the HTML5 and JS equivalent of Silverlight and Flex Builders Delivers pure HTML-based applications that work on desktop browsers, tablets, and even smart phones Completely integrated within the ArcGIS Online and Portal for ArcGIS platforms Provides over 30 out-of-the-box widgets, such as mapping, query, geoprocessing, analysis, editing, and printing, and so on Supports both 2D and 3D map applications Extensible framework for developers to create widgets or themes, and embed them in applications To access Web AppBuilder for ArcGIS, you must have ArcGIS Online organization account or Portal for ArcGIS account Currently at beta 2 so need to sign up at https://betacommunity.esri.com

Supported Browsers

Chrome
Firefox
Safari 3+
Internet Explorer 9+

Installation

Stupid simple
Download Unzip run start.bat
or
run node server.js in directory from command prompt

Create an App

Set the map (webmap)
Set the theme
Choose your widgets
Set the app attributes
Run it!

Set your (Web)map

Author on ArcGIS Online
or Portal
Set the start extent

Set your theme

Determines look and feel
Layout
Affects the UX

App Attributes

Title
Subtitle
Logo
Links
Use a proxy

Widgets

Some are preconfigured with a layout
In-panel and off-panel widgets
~20 included currently OOTB

Off-Panel widgets

Attribute table
Coordinate
Geocoder
Home Button
My Location
Overview Map
Scalebar

Off-panel widgets are available as part of a theme but not addable to the widgets' controller. They can be turned on or off but cannot be removed from the application. When the Widget tab is activated, the off-panel widgets embedded in a theme display. An off-panel widget does not have a panel and cannot be contained by header or side controllers. Attribute table—Displays a tabular view of a feature layer's attributes. Coordinate—Displays coordinates in the current map projection when moving the cursor on the map or in other coordinate systems by clicking the map. Geocoder—Enables finding a location on the map. Home Button—Click to zoom to map's initial extent. My Location—Detects your physical location and zooms the map to it. Overview Map—Shows the current spatial extent of the map display as a grey rectangle relative to the entire spatial extent of the basemap service. Scalebar—Displays a scalebar on the map

In-Panel widgets

Basemap Gallery
Bookmark
Chart
Directions
Draw
Edit

In-panel widgets are available to the widget controllers and can be added to your application. By default, they are contained by a controller. Depending on which theme you select, they may show in the upper right corner of the application with the header controller in a Foldable theme, or on the left side of the application with the side controller in the Tab theme. Each in-panel widget requires user interactions on the panel. In addition, in-panel widgets are associated with placeholders that define the position of an in-panel widget. Instead of displaying in the controller, an in-panel widget can also display in the placeholder. Basemap Gallery—Presents a gallery of basemaps and allows you to select one. Bookmark—Spatial bookmarks for quick navigation. Chart—Display charts for selected features. Directions—Calculates and displays directions between two or more locations. Draw—Draws basic graphics and texts on the map. Edit—Provides tools to modify features in editable layers.

In-Panel widgets cont.

Geoprocessing
Layer List
Legend
Measurement
Print
Query

Over to Dave

Customization Options

Edit existing widgets / themes
Create widgets
Create themes - styles and layouts

Custom Widgets

Naming convention
Required files
In or Off Panel
Can be configurable (code and in builder)
Support multiple cultures
Support themes
Communication with app container, map and other widgets

Widget class - Uses the convention name, Widget.js. Widget template (widget UI) - Uses the same name as the widget class except with a .html extension. For example, Widget.html. Widget configuration file - Uses the config.json file and puts it into the widget folder. Widget I18N file (locale file) - Uses the strings.js file and puts it into the nls folder. For more information, see Dojo’s documentation at http://dojotoolkit.org/documentation/tutorials/1.8/i18n/. Widget style file - Uses the style.css file and puts it into the css folder. Puts all the images used by the style into the images css subfolder. Widget icon files - Uses the icon.png file name and puts it into the images folder. Widget manifest file - Uses the name manifest.json to describe the widget’s content. The JavaScript file that defines the widget (Widget.js) - only required file to work Template file that defines the widget’s UI (Widget.html) The widget’s configuration file (config.json) The widget’s i18n strings file (nls/strings.js) The widget’s style file (css/style.css) Support themes Extend BaseWidget class Use CSS classes for other dijits provided by app container Follow dojo conventions Can access app container lifecycle functions Can access the map Can communicate between widgets

Lets Create a Widget

OpenWeatherMap

Custom Themes

Panels
Theme Widgets
Styles
Layouts
manifest.json

An ArcGIS Web AppBuilder theme is a collection of user interface elements that define an app's look-and-feel, layout, app navigation, and on screen functional UI items such as scale bar, overview map, and so on. By developing a theme, you can create your application's interface, interactive user experience, and branding style. The theme elements includes widget panels, style sheets, and layout definitions and theme widgets. One app can include more than one theme, but can only use one theme while running. A Panel is a UI window that displays a widget's content. A Panel can be developed to have its own distinguish behaviors and style for a specific theme. For example, you can develop a Panel that can be dragged around the screen and have purple color style that matches your overall theme style. With the theme Panel, widget developers can focus on developing a widget's function and content without worrying about how the widget displays, which further simplifies the widget development task. A theme can contain multiple Panels. A Theme widget is no more than a regular Web AppBuilder widget in terms of coding. However, without this widget as part of the theme, the theme is not complete. For example, the Header Controller widget is part of the out-of-the-box theme, called Foldable theme. Header Controller is developed to navigate all the widgets configured into an app. Creating the Theme widget is also a mechanism to ensure a theme can be shared as whole. A Style is a CSS file that you can define your CSS rules in. One theme can contains multiple styles. A Layout theme is essentially an app configuration placing all the UI elements (widgets) on the screen. It also includes predefined position holders (placeholders) on the screen that can be configured with widgets in the GUI AppBuilder. A theme can have multiple layouts. All theme elements are contained inside a folder. The folder name should be the same as the theme's name. Similar to a widget, a theme must have an icon file named icon.png, which is under the \images folder. The theme root folder contains a common.css file. It defines the style content that is common for all styles. A theme can include multiple styles in the \styles folder. Each style has a folder that is named the same as the style name. Each style must have a style.css file. There must be a style named default. A theme can include multiple panels in the \panels folder. Each panel has a folder named the same as the panel name. Each panel must have a Panel.js file. A theme can include multiple layouts in the \layouts folder. Each layout has a folder named the same as the layout name. Each layout must have a config.json file and an icon.png file. There must be a layout named default. There must be a manifest.json file to describe the theme's content.

Lets Create a Theme

Find an Eagle staff member
Ask a question
Guess the number of #NZEUC tweets
Follow @eaglegis for updates
Entries close an hour before closing session

Thanks!

@jiriteach @davetimmins

Slides