Browse related records in a popup

Explore in the sandboxView live

This sample demonstrates how to add RelationshipContent to a PopupTemplate to allow browsing of related records. Creating relationships between layers and tables provides a way to associate features and records with one another without being in the same layer or table and helps enforce referential integrity between related objects.

The data used in this sample helps visualize the relationships between CALFIRE administrative units, incorporated California cities, CALFIRE wildfire protection facilities along with their statistics, and burn areas for fires that occurred from 2017-2021. There are four different relationships between the layers and table that were created in ArcGIS Pro before publishing the data:

Wildfire burn areas in California and which CALFIRE Administration Units responded to that burn area.
CALFIRE Wildfire Protection Facilities and the CALFIRE Administration Unit that facility reports to.
Incorporated cites and the CALFIRE Wildfire Protection facilities that reside in that city.
CALFIRE facility statistics for its corresponding CALFIRE Administration Unit.

See the ArcGIS Pro relationship documentation for more information on relationships and how to create them between layers and/or tables.

Below is a table that shows the relationship definitions for the sample data:

Origin layer name	Destination layer/table name	Origin primary key	Origin foreign key	Relationship type	Cardinality
CALFIRE Administration Units	Wildfire Burn Areas	UNITCODE	UNIT_ID	Simple	One to many
CALFIRE Administration Units	Wildfire Protection Facilities	UNITCODE	UNIT	Simple	One to many
Incorporated Cities	Wildfire Protection Facilities	CITY	CITY	Simple	One to many
CALFIRE Administration Units	Facility Statistics	UNITCODE	UNIT	Simple	One to one

The details of the relationships can also be found on the layer level on the service. For example, the CAL_FIRE_Admin_Units relationship information can be found in the layer properties under the Relationships section of the service.

The code snippet below shows how to configure RelationshipContent and add it to the PopupTemplate of the CALFIRE Administration Units FeatureLayer. In this case, the administrative units layer has three relationships, which can be added as an array to the popup template's content. For the related records to display within the popup, the related layers and/or tables must be added to the map. Otherwise, an error will be shown in the popup content.

Use dark colors for code blocksCopy
const unitLayer = new FeatureLayer({
    url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/California_Wildfires_with_Nonspatial_Table/FeatureServer/3",
    title: "CALFIRE Administrative Unit Boundaries",
    outFields: ["*"],
    popupTemplate: {
        title: "{UNIT}",
        outFields: ["*"],
        returnGeometry: true,
        fieldInfos: [
            {
                fieldName: "UNITCODE",
                label: "Unit Code"
            },
            {
                fieldName: "REGION",
                label: "Region"
            }
            ],
            content: [
            // Add FieldContent to popup template.
            {
                type: "fields"
            },
            // Create RelationshipContent with the relationship between
            // the units and fires.
            {
                type: "relationship",
                // The numeric ID value for the defined relationship on the service.
                // This can be found on the service.
                relationshipId: 2,
                description: "Fires that {UNIT} responded to from 2017-2021 ordered by most to least acreage burned.",
                // Display two related fire features in the list of related features.
                displayCount: 2,
                title: "Fires",
                // Order the related features by the 'GIS_ACRES' in descending order.
                orderByFields: {
                    field: "GIS_ACRES",
                    order: "desc"
                }
            },
            // Create RelationshipContent with the relationship between
            // the units and wildfire protection facility statistics table.
            {
                type: "relationship",
                relationshipId: 3,
                description: "Statistics on the facilities for wildland fire protection that reside within {UNIT}.",
                // Display only the one unit
                displayCount: 1,
                title: "Unit Facility Statistics",
                // Order list of related records by the 'NAME' field in ascending order.
                orderByFields: {
                    field: "UNIT",
                    order: "asc"
                }
            },
            // Create RelationshipContent with the relationship between
            // the counties and wildfire protection facilities.
            {
                type: "relationship",
                relationshipId: 1,
                description: "All facilities for wild land fire protection that reside in {UNIT}.",
                // Display only two related cities.
                displayCount: 2,
                title: "Facilities for Wildland Fire Protection",
                // Order list of related records by the 'NAME' field in ascending order.
                orderByFields: {
                    field: "NAME",
                    order: "asc"
                }
            }
        ]
    },
    // Create a simple renderer with no fill and lighter outline.
    renderer: {
        type: "simple",
        symbol: {
            type: "simple-fill",
            color: null,
            outline: {
                width: 0.5,
                color: "rgba(128,128,128,0.4)"
            }
        }
    }
});

MapView

arcade