Web AppBuilder:

customize Esri Widgets or build your

own using JavaScript API

Presented by: Dave Orlando, GIS Analyst, RD Central Okanagan

April 26, 2016

Regional District of Central Okanagan

• < 2010

- Internal application built with Map Objects

- Web application built with WebADF

• 2010 – present

- Web application built with Silverlight API

• Present - …..

- Web application built with Web AppBuilder (JavaScript API)

Why Web AppBuilder,

Why JavaScript API

• “Silverlight - Rest in Peace”

- Rex Hanson – Esri Product Manager

• Create public map viewer to replace current application

• Most functionality possible

• Least effort / shortest learning curve

• Leverage Esri developers

• JavaScript is only API left for Web development

How Web AppBuilder accesses your data

• REST endpoint (your ArcServer)

• Web Map (ArcGIS.com)

Web AppBuilder • Four configuration pages

Widgets

Widgets requiring panel

Widgets on-screen

Widgets - configuration • Most are full point & click configuration

• Others require ArcGIS online ‘helper’ items

• Some can use your REST items

Query Widget

• Query any layer in WebMap or REST endpoint

Search Widget

• Search using a Geocoder or Feature Layer

Query & Search Widget

• Both widgets reference data layers by the layer’s index # in the

REST service

• Be very conscious of this when adding layers to your services,

you queries will stop working

• Two possible solution:

• Create a ‘select’ MapService that is used for selections only, no

display at all. This lets you add new layers to the bottom with no

regard to display

• ArcMap / ArcServer 10.3+ has a new feature to overwrite the layer

indices when publishing

Directions Widget • esri’s route service requires ArcGIS credentials

• Can proxy credentials through ArcGIS ‘item’

• Use your own Geocoder

Print Widget

• Print using your own templates (empty MXDs)

Geoprocessing Widget

• Running your Models

Custom Widget (JavaScript API)

• ArcGIS API for JavaScript resource page

• https://developers.arcgis.com/javascript/

Custom Widget (JavaScript API)

• Web AppBuilder for ArcGIS resource page

• https://developers.arcgis.com/web-appbuilder/

Custom Widget (JavaScript API)

• Visual Studio

Custom Widget (JavaScript API)

• Widget.js

Custom Widget (JavaScript API)

• Widget.js

• Step 1: query address points, feed geometries to Step 2

Custom Widget (JavaScript API)

• Widget.js

• Step 2: buffer points, add results to GraphicLayer

Geoprocessing vs JavaScript

• DEMO

• Questions?.....

Thank-you,

Dave Orlando, GIS Analyst, RDCO

dave.orlando@cord.bc.ca

250-469-6267