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
• Questions?.....
Thank-you,
Dave Orlando, GIS Analyst, RDCO
250-469-6267