Issue with using Unique value groups with field and field1

[LayEngTan]

Hi, I would like to find out is using Unique Value Groups, with "field" and "field2", still support putting list of values in the values field?

It is working fine when using it with just one "field" (highlighted in green), but it does not work when "field2" is added into the conditions (highlighted in red).

const renderer = {
    type: "unique-value",
    field: "test1",
    uniqueValueGroups: [{
        heading: "Heading 1",
        classes: [{
            label: "Label 1",
            symbol: {
                type: "simple-marker",
                style: "circle",
                color: "#58ff60",
                outline: {
                    color: "rgba(140,255,120,0.5)",
                    width: 6
                }
            },
            values: ["testValue", "testValue1"]
        }, {
            label: "Label 2",
            symbol: {
                type: "simple-marker",
                style: "circle",
                color: "#58ff60",
                outline: {
                    color: "rgba(140,255,120,0.5)",
                    width: 6
                }
            },
            values: "testValue3"
        }]
    }]
}

const renderer = {
    type: "unique-value",
    field: "test1",
    field2: "test2",
    uniqueValueGroups: [{
        heading: "Heading 1",
        classes: [{
            label: "Label 1",
            symbol: {
                type: "simple-marker",
                style: "circle",
                color: "#58ff60",
                outline: {
                    color: "rgba(140,255,120,0.5)",
                    width: 6
                }
            },
            values: {
                value: ["testValue", "testValue1"],
                value2: "testValve2"
            }
        }, {
            label: "Label 2",
            symbol: {
                type: "simple-marker",
                style: "circle",
                color: "#58ff60",
                outline: {
                    color: "rgba(140,255,120,0.5)",
                    width: 6
                }
            },
            values: {
                value: "testValue3",
                value2: "testValve4"
            }
        }]
    }]
}

[KristianEkenes]

The first scenario works because passing an array of strings to the values property is a convenience pattern when you're only working with one value. The second example is using incorrect syntax. You can't pass an array to values.value or values.value2. The values property takes an array of objects, like this... That way you can pair up values that go together in a 

const renderer = {
    type: "unique-value",
    field: "test1",
    field2: "test2",
    uniqueValueGroups: [{
        heading: "Heading 1",
        classes: [{
            label: "Label 1",
            symbol: {
                type: "simple-marker",
                style: "circle",
                color: "#58ff60",
                outline: {
                    color: "rgba(140,255,120,0.5)",
                    width: 6
                }
            },
            values: [{
                value: "testValue"
            }, {
                value: "testValue1",
            }, {
                value2: "testValve2"
            }]
        }, {
            label: "Label 2",
            symbol: {
                type: "simple-marker",
                style: "circle",
                color: "#58ff60",
                outline: {
                    color: "rgba(140,255,120,0.5)",
                    width: 6
                }
            },
            values: {
                value: "testValue3",
                value2: "testValve4"
            }
        }]
    }]
}

Or if you want field1 and field2 values combined to represent one category, you specify the values for each within a single object.

values: [{
  value: "testValu1",
  value2: "testValue2"
}, {
  value: "testValue3",
}, {
  value2: "testValve4"
}]

[LayEngTan · Accepted solution]

Hi KristianEkenes,

Thank you for the solutions. However, when using field and field2 together, each single object need to have both value and value2. I have tested it and it worked. Thank you.

Here is the working version (highlighted in green).

const renderer = {
    type: "unique-value",
    field: "test1",
    field2: "test2",
    uniqueValueGroups: [{
        heading: "Heading 1",
        classes: [{
            label: "Label 1",
            symbol: {
                type: "simple-marker",
                style: "circle",
                color: "#58ff60",
                outline: {
                    color: "rgba(140,255,120,0.5)",
                    width: 6
                }
            },
            values: [{
                value: "testValue",
                value2: "testValve2"
            }, {
                value: "testValue1",
                value2: "testValve2"
            }
            ]
        }, {
            label: "Label 2",
            symbol: {
                type: "simple-marker",
                style: "circle",
                color: "#58ff60",
                outline: {
                    color: "rgba(140,255,120,0.5)",
                    width: 6
                }
            },
            values: {
                value: "testValue3",
                value2: "testValve4"
            }
        }
        ]
    }
    ]
}

[JoelBennett]

If anyone is looking to create a multi-field UniqueValueRenderer via rendererJsonUtils.fromJSON or UniqueValueRenderer.fromJSON, the still undocumented JSON structure for specifying it with uniqueValueGroups has the corresponding structure below:

{
	"type": "uniqueValue",
	"field1": "test1",
	"field2": "test2",
	"uniqueValueGroups": [{
		"heading": "Heading 1",
		"classes": [{
			"label": "Label 1",
			"symbol": {
				"type": "esriSMS",
				"style": "esriSMSCircle",
				"color": [88,255,96,255],
				"outline": {
					"color": [140,255,120,128],
					"width": 6
				}
			},
			"values": [
				["testValue","testValue2"],
				["testValue1","testValue2"]
			]
		}, {
			"label": "Label 2",
			"symbol": {
				"type": "esriSMS",
				"style": "esriSMSCircle",
				"color": [88,255,96,255],
				"outline": {
					"color": [140,255,120,128],
					"width": 6
				}
			},
			"values": [
				["testValue3","testValue4"]
			]
		}]
	}]
}

Note that the "values" property must be specified as an Array of arrays.

[KristianEkenes]

> the still undocumented JSON structure for specifying it with uniqueValueGroups

The JSON structure has actually been documented in the web map specification ever since the concept was introduced. You can find it here: 

https://developers.arcgis.com/web-map-specification/objects/uniqueValueRenderer/
https://developers.arcgis.com/web-map-specification/objects/uniqueValueGroup/
https://developers.arcgis.com/web-map-specification/objects/uniqueValueClass/

It includes examples with multiple scenarios. Perhaps we should improve the JS documentation to link to the web map specification.

[JoelBennett]

Thank you, I stand corrected.