![Page 1: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/1.jpg)
Customizing and Extending ArcGIS Web
Application TemplatesShan Shan Lam – Esri China (HK)
Richard Chau – Esri China (HK)
![Page 2: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/2.jpg)
What are Templates
![Page 3: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/3.jpg)
Language Support
![Page 4: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/4.jpg)
Configurable
![Page 5: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/5.jpg)
Sharing Options
• Publish
• Download
![Page 6: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/6.jpg)
Using Templates
http://www.northfrontenac.com/about-overview.html
![Page 7: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/7.jpg)
Tell a Story
http://dcist.com/2014/03/tree_vandal_damaged_more_tha
n_750_t.php
http://blogs.seattletimes.com/fyi-
guy/2014/07/11/surprising-places-car-ownership-is-
up/
![Page 8: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/8.jpg)
Embed Map or Gallery
https://www.cityofkingston.ca/residents/recreation/parks-trails
![Page 9: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/9.jpg)
Map IDA unique identifier, like a social security number
![Page 10: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/10.jpg)
Richard Chau
Demo: Build a Map
![Page 11: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/11.jpg)
Web Maps
• createMap
• getItem
• getLegendLayers
![Page 12: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/12.jpg)
Richard Chau
Demo: Working
with the Web Map
![Page 13: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/13.jpg)
Configuring
Templates
![Page 14: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/14.jpg)
Create an Application
![Page 15: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/15.jpg)
Richard Chau
Demo: Create an
App
![Page 16: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/16.jpg)
• Early Adopters
• Custom templates
Custom Template Gallery
![Page 17: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/17.jpg)
Customizing
Templates
![Page 18: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/18.jpg)
Methods of Customization
![Page 19: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/19.jpg)
Webmap Web Application
![Page 20: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/20.jpg)
Download Item (PIM)
![Page 21: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/21.jpg)
Getting the Code & GitHub Issues
![Page 22: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/22.jpg)
Richard Chau
Demo: Customize
PIM Template
![Page 23: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/23.jpg)
Application
Boilerplate
![Page 24: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/24.jpg)
What is it?
• Starter Application
• Includes template & app logic
• Working with ArcGIS Online
- Webmaps
- Services
- i18n
- Authentication
- Configurable
![Page 25: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/25.jpg)
Why would I need it?
• Makes life simpler
• Handles common template logic
• oAuth workflow
• Template configuration for Arcgis.com
• Used in newer templates on AGOL
![Page 26: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/26.jpg)
Customizing
Layers
Panels
Legend
Widgets etc.
![Page 27: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/27.jpg)
Dissecting the Boilerplate
![Page 28: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/28.jpg)
Richard Chau
Demo: Lets
Customize!
![Page 29: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/29.jpg)
Customize Boilerplate & Create Template
• Add Locate Button
• Add Legend
• Modify Configuration JSON
• Create Item on AGOL
• Share Item into template group
• Preview Item
• Configure Item
![Page 30: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/30.jpg)
Edit Application Item
![Page 31: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/31.jpg)
JSON!
![Page 32: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/32.jpg)
Configuration Parameters
![Page 33: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/33.jpg)
Code on GitHub
![Page 34: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/34.jpg)
![Page 35: Customizing and Extending ArcGIS Web Application Templates · Customizing and Extending ArcGIS Web Application Templates Shan Shan Lam –Esri China (HK) Richard Chau –Esri China](https://reader034.vdocuments.mx/reader034/viewer/2022052101/603acfe31f7d3c518800d0bd/html5/thumbnails/35.jpg)
Share your moment #EsriAPUC