![Page 1: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/1.jpg)
Creating and publishing your own
configurable apps for your organization
Beth Romero
Ian Wittenmyer
Ryan Libed
![Page 2: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/2.jpg)
What are configurable apps?
• Hosted apps maintained by Esri in the cloud
• Fastest and easiest way to go from a map to a shareable app
• Designed for you to configure, assemble, build – no programming required
• Source code available
![Page 3: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/3.jpg)
A great app starts with a great map
• Cartography (smart mapping)
• Transparency, scale ranges, bookmarks
• Pop-ups
• Performance
![Page 4: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/4.jpg)
Checklist to optimize layers for high demand apps
Disable Editing on all public feature layers Set Cache Control interval which aligns with data update schedule
Ensure all layers and links use https
Set a refresh interval which aligns with data update schedule
Consider tile layers for static data
Set scale visibility
![Page 5: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/5.jpg)
Delete protection
• Ensures maps, apps and related items don’t vanish
• Item Setting tab
![Page 6: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/6.jpg)
Apps complete the user experience
• Present map information and tools in meaningful ways
• Configured to reach target audience
• Support workflows and workforce tasks
Map App template Configured application
![Page 7: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/7.jpg)
Create apps with a variety of content
• The gallery of 41 configurable app templates allow you to build a simple
focused experience for a variety of geospatial content.
• Build apps based on:
- Web Maps – 32*
- Web Scenes – 6*
- Groups – 5
- * some apps work with maps or scenes
![Page 8: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/8.jpg)
Key Updates since last year
• New Apps: 4x javascript api
- Attachment Viewer
- Zone Lookup
- Interactive Legend
- Key Updates
- Category Gallery
![Page 9: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/9.jpg)
DEMONSTRATION
Beth
![Page 10: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/10.jpg)
Customization without coding
Ian
![Page 11: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/11.jpg)
Templates: Making Apps Configurable and Reusable
![Page 12: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/12.jpg)
App Design Considerations
• Usability:
- Focus on the purpose of your app.
- Who is it for and what do they need to learn from your app?
- Is it for a GIS user or one of your relatives?
- What features do you need to provide
- Don’t add options just because they are available, can be distracting
- Search:
- Configure search to create a clear path for end users to find what they need.
• Descriptive Text:
- web map information is default
• Theme:
- Color Contrast Analyzer http://webaim.org/resources/contrastchecker/
- Logo – transparent background
![Page 13: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/13.jpg)
Configuring the app
• All apps have configurable options
- Customize the app
- Reduce confusion
- Brand it for your organization
- And more
• These options are defined in JSON
- This will be important later…
![Page 14: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/14.jpg)
Description text
![Page 15: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/15.jpg)
Search
Configuration Options
Multiple searches
Place holder text
Name
Search within extent
Country code
Locators:
placeholder text
meaningful names
Suggestions
10.3 geocoding service with suggest capability
10.3 feature layer supports pagination.
![Page 16: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/16.jpg)
Custom Url Params
![Page 17: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/17.jpg)
Locate
• Only available via https
![Page 18: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/18.jpg)
Theme
• Define colors
- Pre-selected colors
- Hex value
- Palette sites
• Use org colors
• Accessibility
- Color contrast
• Logo
- Choose appropriate size
- Consider transparency
- Hosting options
![Page 19: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/19.jpg)
Shared Theme settings
![Page 20: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/20.jpg)
Custom CSS
![Page 21: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/21.jpg)
DEMONSTRATION
Ian
![Page 22: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/22.jpg)
Extending Existing Apps
Ryan
![Page 23: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/23.jpg)
What are configurable apps
• Source Code
• Configuration files
![Page 24: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/24.jpg)
Get source code for out of the box apps
• https://www.arcgis.com/home/item.html?id=5b8ca611fa2e43f7968212d6d4d065cb
![Page 25: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/25.jpg)
GitHub – Esri
• https://github.com/Esri/interactive-legend
• Installation instructions
• Source code
![Page 26: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/26.jpg)
Appid
• Unique application
identifier
• Stores
customizations
![Page 27: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/27.jpg)
Configuration Panel JSON
• Define
customization
options
![Page 28: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/28.jpg)
Configuration Panel Documentation
• Options
- Dropdown lists
- Layer and field pickers
- Boolean
- String
- Base maps and more..
• https://doc.arcgis.com/en/arcgis-online/create-maps/create-app-templates.htm
![Page 29: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/29.jpg)
Code overview
![Page 30: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/30.jpg)
Configuration options
• App specific settings
![Page 31: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/31.jpg)
Using the ArcGIS API for JavaScript 4.x
- Version 4.12
- Get the API by using
the CDN or Content
Delivery Network
- API Reference
- Samples
https://developers.arcgis.com/javascript/
![Page 32: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/32.jpg)
Adding widgets
• Sample code
- Sandbox
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-legend
![Page 33: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/33.jpg)
Configurable App Components
https://github.com/Esri/configurable-app-components
• Configurable app
components GitHub
• Custom Share Widget
![Page 34: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/34.jpg)
Existing code to add widgets
![Page 35: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/35.jpg)
Add Share
![Page 36: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/36.jpg)
Share Widget
![Page 37: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/37.jpg)
DEMONSTRATION
Ryan
![Page 38: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/38.jpg)
Ryan
Build a custom configurable app
![Page 39: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/39.jpg)
Application base
- Portal info
- User info
- Item data
- Configured app info
- Url params
- I18n and more
• https://www.npmjs.com/package/@esri/application-base-js
![Page 40: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/40.jpg)
Configurable App Examples
• Sample apps
• TypeScript and JavaScript
https://github.com/Esri/configurable-app-examples-4x-js
![Page 41: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/41.jpg)
Custom App Example
• Built using application-base
• Used with webmap-ts from
configurable-app-examples-
4x-js
• Include custom screenshot
component from configurable-
app-components
![Page 42: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/42.jpg)
Demo Custom App
• http://servicesbeta.esri.com/demos/cats/UC2019/screenshot-sample-app/index.html
![Page 43: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/43.jpg)
![Page 44: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/44.jpg)
Please Share Your Feedback in the App
Download the Esri
Events app and find
your event
Select the session
you attended
Scroll down to
“Survey”
Log in to access the
survey
Complete the survey
and select “Submit”
![Page 45: Creating and Publishing Your Own Configurable Apps for ... · 2019 Esri User Conference -- Presentation Keywords: 2019 Esri User Conference -- Presentation; 2019 Esri UC; Creating](https://reader031.vdocuments.us/reader031/viewer/2022011905/5f26e098f8ed17078d633041/html5/thumbnails/45.jpg)
Thank You!
Beth Romero
Ian Wittenmyer
Ryan Libed