ArcGIS Experience Builder

Every way to switch pages in ArcGIS Experience Builder

ArcGIS Experience Builder is a dynamic tool for building interactive web apps with little or no code. It’s built on ArcGIS Maps SDK for JavaScript and is the successor to ArcGIS Web AppBuilder. Unlike Web AppBuilder, Experience Builder allows you to build multipage apps, which means you need to design an easy-to-follow user interface for navigating around your app.

These are all of the Experience Builder widgets and features you can use to get people from one page to another, along with examples and tips.

The Menu widget is the simplest way to let users navigate between your app’s pages.

Screenshot of Houseal Lavigne's Heinz Field Explorer
Houseal Lavigne's Heinz Field Explorer uses a Menu widget at the top of each page.

The widget pulls directly from your app’s page outline, meaning any and all pages that you add appear in the Menu widget. This also means you can add folders and URL links to a menu.

Screenshot of a Menu widget and page outline
The Wildfire Incidents in North America template uses a Menu widget.

You can add a Menu widget, and all other widgets, from the Insert widget tab.

Screenshot of the Menu widget in the Insert widget tab
You can find the Menu widget in the Insert widget tab under Menu and toolbars.

The Menu widget has three choices of user interface: Icon, Vertical, and Horizontal. Houseal Lavigne’s Heinz Field Explorer has a menu that is horizontal on desktop sized screens and an icon on mobile screens. Icon is designed for vertically-oriented screens.

Screenshot of the Heinz Field Explorer vertical menu
The app's menu as it appears on mobile devices.

If you want to learn more about how to make an Experience Builder layout responsive to different screen sizes, I recommend this tutorial: Optimize an app layout for mobile.

Example

The Rivers Trust’s Is My River Fit to Play In? tool uses a Menu widget at the top of the app. The menu includes pages, a folder, and a hyperlink. You can make a menu appear fixed across all pages either by including it in the app’s header or by duplicating it and making sure it’s in the exact same position on all pages.

Screenshot of The Rivers Trust's app
Open the app in a new tab

The MapĀ drop-down is a folder containing four copies of the map page, one for each year. To replicate this, click the More button next to Add pageĀ and click Add folder. Drag any pages you want to appear in the drop-down on top of the folder, then drag to reorder them as you like. The Rivers Trust’s app has the 2022 page set as the homepage.

Screenshot of the More drop-down in the Page tab.
You can add pages, links, and folders in the Page tab.

If you’d like more customization and freedom than the Menu widget provides, four page element widgets allow you to set links to pages: Button, Text, Image, and Card.

Screenshot of the Insert widget panel
You can find the four widgets in the Insert widget tab under Page elements.

In each of these widgets’ settings, you can click Set link to open the Set link panel, where you can choose to link a page, select a specific page, and choose where the page opens. Usually you would select App window, since that makes the new page open in the current window (the same behavior as a Menu widget).

Screenshot of the Set link panel and the Image widget's settings
You can set a link on an Image widget in the widget's settings.

The Text widget has a different Set link button than the other three page element widgets. To open the Set link panel in the Text widget’s settings, click the link icon under Text format. You can set a link on an entire block of text or on an individual word or sentence. If you have a link in the middle of a paragraph, it’s best practice to draw attention to linked text by making it a different color, underlined, or both.

Screenshot of the Text widget's settings.
The Set link button in the Text widget's settings.

Examples

Esri’s Space Exploration template includes a menu that is not a Menu widget. Instead, it’s made out of a Window and Button widgets with links. The Window is linked to a button that we duplicated and placed at the top of every page. Try navigating through the Space Exploration app.

Screenshot of the Space Exploration template
Open the app in a new tab

Bruno Sousa’s Mars 2020 Mission Tracker includes a landing page with a Begin Exploring button that takes you to the app’s main page.

Screenshot of the Mars 2020 Mission Tracker app.
Open the app in a new tab

A few Experience Builder apps include a similar landing page with a “launch” button that doesn’t actually launch anything, it just links to the main page. This is a clever way of welcoming users to your app. To re-create this, make a welcome page, assign it as your app’s homepage so that it appears first when the app loads, then add a Button, Text, Image, Card, or Search widget.

Screenshot of the Make homepage button.
The Make homepage button.

The Search widget has a slightly different Set link feature. You can make your app go to a new page, view, or window when the user performs a search. This is useful if you want to show search results in a map or table on a different page. The setting is meant to be an alternative to having search results appear in a panel above or below the widget.

Screenshot of the Search widget in the Insert widget tab
You can find the Search widget in the Insert widget tab under Data centric.

Once you add a Search widget, you can find the Set link button in the widget’s content settings under Search result. Turn off Result panel to reveal the button.

Screenshot of the Search widget's Content settings
The Set link setting appears when you turn off Result panel.

Example

Esri’s Hotel Booking template has a Search widget on the landing page that links to a second page. Try searching for “California” as a destination.

Screenshot of the Hotel Booking template
Open the app in a new tab

URL parameters

URL parameters are elements that you add to a URL to pass along data or instructions. You can direct an app to open to a specific page by adding page followed by the page’s name, following this format:

https://experience.arcgis.com/experience/AppID/page/Page-4

This is useful if you want to embed an app and have it open to a page other than the landing page, or if you want to provide a link to one of your app’s pages. For example, the following is a link to the Space Exploration template’s Planets page:

experience.arcgis.com/template/f3893501c6a74b0182f040bd5d485fda/page/Planets/

For a full list of URL parameters supported by Experience Builder, read ArcGIS Experience Builder documentation.

More information

The following is a list of every app mentioned in this article. You can find all of these apps in either the Experience Builder gallery or the templates gallery.

For more information about Experience Builder, see the following resources:

About the author

Thomas is the technical writer for ArcGIS Experience Builder and ArcGIS Maps for Adobe Creative Cloud at Esri. He earned a degree in environmental science from the University of Massachusetts Amherst. Follow him @coughlinmaps.

Connect:
2 Comments
Oldest
Newest
Inline Feedbacks
View all comments

Next Article

Engaging Volunteers for a Cause

Read this article