creating and publishing your own configurable apps for ... · 2019 esri user conference --...

Creating and publishing your own

configurable apps for your organization

Beth Romero

bromero@esri.com

Ian Wittenmyer

iwittenmyer@esri.com

Ryan Libed

rlibed@esri.com

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

bromero@esri.com

Ian Wittenmyer

iwittenmyer@esri.com

Ryan Libed

rlibed@esri.com