Dynamically link multiple views or pages using buttons in ArcGIS Experience Builder

Summary

In ArcGIS Experience Builder, the Section widget is often used as a layout container for dynamic content. A section with one or more views can include a combination of any other widgets, such as a map, list, or image, connected to one or multiple data sources. Using the ‘Set link’ option in the Button, Text, or Image widget, dynamic buttons, text, or images can be created to allow web experience users to switch between different views or pages in a web experience.

In this article, the web experience titled Singapore Central Business District consists of two pages. Page 1 consists of one Section widget with three different views, titled Rail Lines View, Rail Stations View, and Tourist Attractions View, referencing the respective layers from the same web map. Each view contains a Map and a Table widget respectively, as shown in the image below.

Page 2 consists of a Map, a Feature Info, and a List widget, as shown in the image below.

This article demonstrates how to create dynamically linked buttons, images, or text for a web experience consisting of multiple views or pages.

Procedure

Depending on the suitability, use one of the following workflows to create dynamic buttons for a web experience with multiple views or pages in ArcGIS Experience Builder.

Create dynamic buttons using the Views Navigation widget for different views

Add and configure the Views Navigation widget to create dynamic buttons for a web experience containing a Section widget with multiple views.

1. In ArcGIS Experience Builder, click the Insert tab, search for the Views Navigation widget, and drag and drop it to the canvas. By default, dynamic buttons are automatically populated when the Views Navigation widget is added to the canvas.

Note:
Place the Views Navigation widget outside of the Section widget to populate buttons for the views contained in the section.

2. In the Quick style pop-up, select the desired button style.
3. In the <views navigation widget name> pane, on the Content tab, select the desired section from the drop-down menu under Link to. In this example, the Views Navigation widget is linked to the Central Business District Section.

4. Click Save to save the experience.

Three dynamic buttons linking to different views from the Central Business District Section are added to the web experience.

Configure the Section widget to add navigation buttons for different views

1. In ArcGIS Experience Builder, click Page on the left panel, click the Page tab in the left pane, and click the desired page.
2. On the Page tab, under Outline, expand Body, and click the Section widget header to open its configuration pane.

3. In the <section widget name> pane, on the Content tab, under Tools, enable the Arrows or Dots option to add navigation buttons for the views contained in the section.

4. Click Save to save the experience.

The navigation buttons or arrows for each view contained in the same section are added to the web experience.

Create dynamic buttons using the Menu widget to switch between multiple pages

Add and configure the Menu widget to create dynamic buttons for a web experience with multiple pages.

1. In ArcGIS Experience Builder, click Page on the left panel, click the Page tab in the left pane, and click the desired page.
2. On the left panel, click the Insert tab, search for the Menu widget, and drag and drop it to the canvas. By default, dynamic buttons are automatically populated when the Menu widget is added to the canvas.
3. Repeat Steps 1 through 2 to add dynamic buttons for other pages to the web experience.
4. Click Save to save the experience.

Buttons for each page contained in the web experience are displayed.

Create dynamic buttons using the Button widget

Add and configure the Button widget to create dynamic buttons for a web experience with multiple views or pages.

1. In ArcGIS Experience Builder, click the Insert tab, search for the Button widget, and drag and drop it to the canvas.
2. In the Quick style pop-up, select the desired button style.
3. In the <button name> pane, on the Content tab, specify a name for the button under Text. In this example, the button is named Rail Lines Button.
4. On the Content tab, click Set link.
5. In the Set link window, select View or Page from the drop-down arrow under Link to, and select the view under <section widget name> or the page under Select a page. In this example, the Button widget is linked to the Rail Lines View on Page 1.
6. Click OK. Repeat Steps 1 through 6 to create and add dynamic buttons for other views or pages to the web experience.

7. Click Save to save the experience.

Three dynamic buttons linking to three different views are added to the web experience.

Create dynamic text using the Text widget

Add and configure the Text widget to create dynamic text for a web experience with multiple views or pages.

1. In ArcGIS Experience Builder, click the Insert tab, search for the Text widget, and drag and drop it to the canvas.
2. Double-click the Text widget to edit the text. In this example, ‘Click here to navigate to the Rail Lines view.’ is added as text to the canvas.
3. In the <text widget name> pane, on the Content tab, configure the text style under Text format, and click Link to add dynamic content. The Set link window opens.
4. In the Set link window, select View or Page from the drop-down arrow under Link to, and select the view under <section widget name> or page under Select a page. In this example, the Text widget is linked to the Rail Lines View on Page 1.
5. Click OK. Repeat Steps 1 through 5 to create and add dynamic text for other views or pages to the web experience.

6. Click Save to save the experience.

Three lines of dynamic text linking to three different views are added to the web experience.

Create dynamic images using the Image widget

Add and configure the Image widget to create dynamic images for a web experience with multiple views or pages.

1. In ArcGIS Experience Builder, click the Insert tab, search for the Image widget, and drag and drop it to the canvas.
2. In the <image name> pane, on the Content tab, click Select an image under Image source to select or add an image from the local machine or an URL to the Image widget.
3. In the <image name> pane, on the Content tab, click Set link.
4. In the Set link window, select View or Page from the drop-down arrow under Link to, and select the view under <section widget name> or page under Select a page. In this example, the Image widget is linked to the Rail Lines View on Page 1.
5. Click OK. Repeat Steps 1 through 5 to create and add dynamic images for other views or pages to the web experience.

6. Click Save to save the experience.

Three dynamic images linking to three different views are added to the web experience.