Embed Size (px)
Citation preview
Creating and publishing your own
configurable apps for your organization
Beth Romero
Ian Wittenmyer
Ryan Libed
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
A great app starts with a great map
• Cartography (smart mapping)
• Transparency, scale ranges, bookmarks
• Pop-ups
• Performance
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
Delete protection
• Ensures maps, apps and related items don’t vanish
• Item Setting tab
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
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
Key Updates since last year
• New Apps: 4x javascript api
- Attachment Viewer
- Zone Lookup
- Interactive Legend
- Key Updates
- Category Gallery
DEMONSTRATION
Beth
Customization without coding
Ian
Templates: Making Apps Configurable and Reusable
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
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…
Description text
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.
Custom Url Params
Locate
• Only available via https
Theme
• Define colors
- Pre-selected colors
- Hex value
- Palette sites
• Use org colors
• Accessibility
- Color contrast
• Logo
- Choose appropriate size
- Consider transparency
- Hosting options
Shared Theme settings
Custom CSS
DEMONSTRATION
Ian
Extending Existing Apps
Ryan
What are configurable apps
• Source Code
• Configuration files
Get source code for out of the box apps
• https://www.arcgis.com/home/item.html?id=5b8ca611fa2e43f7968212d6d4d065cb
GitHub – Esri
• https://github.com/Esri/interactive-legend
• Installation instructions
• Source code
Appid
• Unique application
identifier
• Stores
customizations
Configuration Panel JSON
• Define
customization
options
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
Code overview
Configuration options
• App specific settings
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/
Adding widgets
• Sample code
- Sandbox
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-legend
Configurable App Components
https://github.com/Esri/configurable-app-components
• Configurable app
components GitHub
• Custom Share Widget
Existing code to add widgets
Add Share
Share Widget
DEMONSTRATION
Ryan
Ryan
Build a custom configurable app
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
Configurable App Examples
• Sample apps
• TypeScript and JavaScript
https://github.com/Esri/configurable-app-examples-4x-js
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
Demo Custom App
• http://servicesbeta.esri.com/demos/cats/UC2019/screenshot-sample-app/index.html
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”
Thank You!
Beth Romero
Ian Wittenmyer
Ryan Libed
