Browse related records in a popup

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:

  1. Wildfire burn areas in California and which CALFIRE Administration Units responded to that burn area.
  2. CALFIRE Wildfire Protection Facilities and the CALFIRE Administration Unit that facility reports to.
  3. Incorporated cites and the CALFIRE Wildfire Protection facilities that reside in that city.
  4. 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 nameDestination layer/table nameOrigin primary keyOrigin foreign keyRelationship typeCardinality
CALFIRE Administration UnitsWildfire Burn AreasUNITCODEUNIT_IDSimpleOne to many
CALFIRE Administration UnitsWildfire Protection FacilitiesUNITCODEUNITSimpleOne to many
Incorporated CitiesWildfire Protection FacilitiesCITYCITYSimpleOne to many
CALFIRE Administration UnitsFacility StatisticsUNITCODEUNITSimpleOne 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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)"
            }
        }
    }
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.