Build mobile experiences with ArcGIS Experience Builder | Documentation

ArcGIS Experience Builder is a tool for building web applications that work on mobile devices. It provides a low-code/no-code environment for creating custom applications without extensive programming knowledge. Experience Builder applications are responsive and automatically adjust to different screen sizes, making them suitable for mobile use.

Here are the key features of using ArcGIS Experience Builder to build mobile solutions:

Feature	Description
Responsive design	Responsive templates and layouts automatically adjust to different screen sizes for a consistent user experience.
Touch optimization	Applications are optimized for touch-based inputs, making it easier for users to interact on mobile devices.
Mobile-specific features	Supports features like GPS location tracking, device orientation, and camera access, allowing applications to use device hardware and sensors.
Low-code/no-code environment	Enables users to create custom applications without extensive programming knowledge.
Cross-platform compatibility	Applications can be published to the web or embedded in other web applications, supporting platforms including iOS and Android.

Use cases

ArcGIS Experience Builder mobile experiences help organizations and individuals deliver interactive, location-based solutions accessible on mobile devices. These experiences support a range of workflows and industries, making it easy to collect data in the field, engage the public, respond to emergencies, and manage assets.

Use case	Description
Field data collection	Enable field workers to collect and update data on-site using their mobile devices.
Public engagement	Share interactive maps and surveys with the public for feedback or information gathering.
Emergency response	Provide first responders with real-time situational awareness and access to critical data on mobile devices.
Asset inspection	Allow teams to view, update, and manage asset information while in the field.

Requirements

Before building a mobile experience, ensure you have:

An ArcGIS Online or ArcGIS Enterprise account with appropriate permissions.
Access to ArcGIS Experience Builder (hosted or developer edition).
A supported web browser (latest versions of Chrome, Firefox, Edge, or Safari).
A mobile device for testing (iOS or Android).

How to build for mobile form factors

Follow these steps to create a mobile-friendly experience using ArcGIS Experience Builder:

Create a new experience
Open ArcGIS Experience Builder and select "Create new" to start a new project.
Choose a mobile-friendly template
Select a template labeled as "mobile" or "responsive." These templates are pre-configured to adapt to smaller screens and touch interactions.
Configure the mobile layout
In the builder, switch to the mobile layout view. Use the device preview options to see how your app will look on different mobile devices. Adjust the layout, stacking, and sizing of widgets for optimal mobile usability.
Add and arrange widgets
Drag and drop widgets such as maps, lists, forms, and buttons onto your mobile layout. Use larger touch targets and simple navigation for a better mobile experience.
Optimize content for mobile
Limit the amount of information and widgets shown at once. Use collapsible panels, tabs, or navigation bars to organize content.
Test and preview
Use the preview feature to test your experience on various device sizes. Make adjustments as needed for readability, performance, and usability.
Publish and share
When ready, publish your experience. Share the link with users, who can access it from their mobile devices.

Authentication

As with any web app accessing secured content, consider these authentication best practices:

Use the Sign In widget to authenticate with ArcGIS Online or ArcGIS Enterprise.
Secure content requires users to have access—verify sharing settings and roles.
Avoid storing tokens in query params or local storage. Rely on the platform’s session and OAuth flows.
For embedded experiences, ensure the parent site permits framing and uses HTTPS.

Device capabilities

Experience Builder apps can leverage certain mobile device capabilities through standard web APIs. Here are some common features:

Location: enable the locate tool; prompt users to allow location permissions. Accuracy depends on device and environment.
Orientation: design layouts that do not rely on fixed orientation; support portrait first.
Camera/attachments: if needed, embed a survey/form workflow (e.g., Survey123 web form) for photo capture; custom widgets can use file inputs.

Performance checklist

Performance is critical on mobile devices. Follow these guidelines to optimize your Experience Builder app:

Recommend using tiled/hosted tile layers over very dense feature layers on mobile.
Use definition queries and scale-dependent rendering to reduce feature counts.
Limit simultaneous layers and widget renders.
Optimize images and media for mobile bandwidth.

Testing and debugging

When testing your mobile experience, consider the following:

Use Chrome DevTools Device Mode to emulate mobile sizes and throttled networks.
Test on real devices (iOS/Android) for touch, scrolling, and keyboard behavior.
Validate focus order and tab navigation; ensure all interactive elements are reachable.
Exercise sign-in flows with private content and different user roles.

Accessibility

Ensure your mobile experience is accessible to all users by following these guidelines:

Provide sufficient color contrast and readable font sizes.
Ensure all actions have visible labels and keyboard access.
Announce dynamic changes (panel opens/updates) with proper semantics.
Avoid relying on hover-only interactions; prefer explicit buttons.

Embedding and distribution

Experience Builder mobile experiences can be easily shared and embedded in other web applications. Consider the following when distributing your mobile app:

Share the app URL directly or embed it in portals/sites via iframe.
If embedding, size the frame for mobile and avoid double-scroll regions.
Ensure the parent site’s Content Security Policy and framing settings allow embedding.
Configure sharing permissions and item visibility for the intended audience.

Best practices

Follow these best practices when building mobile solutions with ArcGIS Experience Builder:

Best Practice	Description
Use responsive design	Ensure your application adjusts to different screen sizes for a consistent user experience.
Optimize for touch	Design with touch-based inputs in mind; use larger buttons and touch-friendly controls.
Test on multiple devices	Test your app on a variety of mobile devices to ensure it works across platforms and screen sizes.
Leverage mobile-specific features	Use features like GPS tracking, device orientation, and camera access to enhance your mobile apps.
Keep it simple	Avoid clutter and complex layouts; focus on a clean, intuitive interface that is easy to navigate on mobile.

Additional resources

Tutorials

Create a starter widget

Learn how to build the base implementation for a widget.

ArcGIS Online

Get map coordinates

Learn how to display the latitude and longitude, scale, and zoom level of the map in a custom widget..

ArcGIS Online

Add layers to a map

Learn how to add layers to a map from a custom widget.

ArcGIS Online

Get started with ArcGIS Experience Builder

Build an interactive web app about housing in America.

ArcGIS Online