Representing an array in a popup

[JMMFIRE]

I have a use case where a graphic can contain data relating to other graphics that have been "merged". The data is stored in an attribute property called `innterGraphics` that contain an array of graphic attributes objects (example below). 

I want to display the `innerGraphics` in a popup but I'm not seeing a native method for representing arrays in a popup. Is there something I'm missing? 

{
    "aggregateGeometries": null,
    "geometry": {
        "spatialReference": {
            "wkid": 4326
        },
        "x": -72.93538699999993,
        "y": 41.332516000000055
    },
    "symbol": null,
    "attributes": {
        "crashId": 1,
        "symbolType": "Sideswipe, Same Direction",
        "groupId": 25,
        "direction": null,
        "date": null,
        "innerGraphics": [
            {
                "crashId": 222,
                "symbolType": "Sideswipe, Same Direction",
                "groupId": 20,
                "direction": 0,
                "date": 1682173620000,
                "severity": "O",
                "narrative": ""
            },
            {
                "crashId": 333,
                "symbolType": "Front to Rear",
                "groupId": 14,
                "direction": 0,
                "date": 1674143040000,
                "severity": "O",
                "narrative": ""
            },
            {
                "crashId": 111,
                "symbolType": "Front to Rear",
                "groupId": 22,
                "direction": 0,
                "date": 1697535840000,
                "severity": "O",
                "narrative": "Narrative unavailable for this crash."
            }
        ]
    },
    "popupTemplate": null
}

[ReneRubalcava]

This is going to require using CustomContent and writing your own UI to display that info. The creator event will give you the graphic and you can return some custom HTML in the function to display your results. I had shown something similar here for weather data.

[ReneRubalcava]

So I had some time and a crazy idea.

You could return a Features widget in the CustomContent of your popup and turn your innerGraphics into pseudo graphics the Features widget could use. It requires some set up, but it works.

https://codepen.io/odoe/pen/xxNdQMQ?editors=0010

const fieldContent = new FieldsContent({
	outFields: ["*"],
	fieldInfos: [
		{
			fieldName: "crashId",
			label: "Crash ID"
		},
		{
			fieldName: "groupId",
			label: "Group ID"
		}
	]
});

const customContentWidget = new CustomContent({
	outFields: ["*"],
	creator: ({ graphic }) => {
		const { innerGraphics } = graphic.attributes;
		const graphics = innerGraphics.map((attributes) => {
			return new Graphic({
				geometry: null,
				attributes,
				popupTemplate: {
					title: "Inner Crash ID: {crashId}",
					content: [
						{
							type: "fields",
							outFields: ["*"],
							fieldInfos: [
								{
									fieldName: "crashId",
									label: "Inner Crash ID"
								},
								{
									fieldName: "groupId",
									label: "Inner Group ID"
								},
								{
									fieldName: "symbolType",
									label: "Symbol"
								},
								{
									fieldName: "direction",
									label: "Direction"
								},
								{
									fieldName: "severity",
									label: "Severity"
								},
								{
									fieldName: "narrative",
									label: "Narrative"
								}
							]
						}
					]
				}
			});
		});

		console.log(graphics);

		const features = new Features({
			features: graphics,
			visible: true,
			visibleElements: {
				actionBar: false,
				closeButton: false,
				collapseButton: false,
			}
		});

		return features;
	}
});

const graphicObj = {
	geometry: {
		spatialReference: {
			wkid: 4326
		},
		x: -72.93538699999993,
		y: 41.332516000000055,
		type: "point" // add geometry type
	},
	symbol: null,
	attributes: {
		crashId: 1,
		symbolType: "Sideswipe, Same Direction",
		groupId: 25,
		direction: null,
		date: null,
		innerGraphics: [
			{
				crashId: 222,
				symbolType: "Sideswipe, Same Direction",
				groupId: 20,
				direction: 0,
				date: 1682173620000,
				severity: "O",
				narrative: ""
			},
			{
				crashId: 333,
				symbolType: "Front to Rear",
				groupId: 14,
				direction: 0,
				date: 1674143040000,
				severity: "O",
				narrative: ""
			},
			{
				crashId: 111,
				symbolType: "Front to Rear",
				groupId: 22,
				direction: 0,
				date: 1697535840000,
				severity: "O",
				narrative: "Narrative unavailable for this crash."
			}
		]
	},
	popupTemplate: {
		title: "Crash ID: {crashId}",
		outFields: ["*"],
		content: [fieldContent, customContentWidget]
	}
};

view.graphics.add(graphicObj);