Display enlarged images in the List widget of ArcGIS Experience Builder

Summary

In ArcGIS Experience Builder, images in a List widget can be configured to enlarge when clicked, providing a clearer view of image attachments. In an example of asset management workflows, inspectors or maintenance personnel can view enlarged images from a list of infrastructures under their jurisdiction to closely examine the inspection photos. This enhances the ability to identify issues and plan maintenance more effectively, leveraging the visual clarity within the experience.

This article outlines the workflow to display enlarged images for viewing in an ArcGIS Experience Builder List widget.

Procedure

1. Open the ArcGIS Experience Builder experience.
2. Add and configure a window to display enlarged images.
1. On the side toolbar, click the Page icon.
2. In the Page panel, click the Window tab.
3. Click the Add window icon and select Blank window in the Add window pane.
4. In the Window configuration panel, under Close options, check the Click outside to close Window check box.
3. Add an Image widget to the window.
1. On the side toolbar, click the Insert icon.
2. In the Insert widget panel, on the New tab, search for the Image widget.
3. Drag and drop the Image widget onto the window.
4. On the Image widget toolbar, click Align > Full size.
4. Configure the Image widget in the window.
1. In the Image widget configuration panel, on the Content tab, toggle Connect to data on and click Select data.
2. In the Select data pane, select the layer containing the image attachments to be displayed in the List widget.
3. In the Image widget configuration panel, click the Dynamic tab.
4. Select Attachment and ensure Selected features is selected.

Note: 
Optionally, on the Dynamic tab, select URL or Symbol to display other icons instead of image attachments in the List widget.

5. On the side toolbar, click the Page icon and the Page tab.
6. Add and configure a List widget on the page.
1. On the side toolbar, click the Insert icon.
2. In the Insert widget panel, on the New tab, search for the List widget.
3. Drag and drop the List widget onto the canvas.
4. In the List widget configuration panel, on the Content tab, select a template and click Start.
5. Under Data, click Select data.
6. In the Select data pane, select the layer containing the image attachments to be displayed in the List widget.
7. Configure the Image widget in the List widget.
1. On the canvas, click the Image widget within the List widget.
2. In the Image widget configuration panel, on the Content tab, click the Dynamic tab.
3. Select Attachment and ensure Auto-populated is selected.
4. Click Set Link.
5. In the Set link pane, for Link to, click the drop-down arrow and select Window from the menu.
6. For Select a window, click the drop-down arrow and select the window added in Step 2 from the menu.
7. Click OK.
8. Click Save and Publish to publish the experience.

The image below displays the enlarged images in a List widget in an experience.