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
}

 

RRubalcava

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);