Problem with UniqueValueRenderer when using field2

[LazyDogz]

I want to use UniqueValueRenderer to set symbols for features. This is my code:

 let rendererTest = {
        type: "unique-value",
        field: "farmType",
        field2: "livestockType",
        fieldDelimiter: ", ",
        uniqueValueInfos: [
            {
                value: "1",
                label: "Pig",
                symbol: {
                    type: "picture-marker",
                    url: "https://cdn-icons-png.flaticon.com/512/776/776450.png",
                    width: "25px",
                    height: "25px",
                    outline: {
                        color: [255, 255, 255],
                        width: 1,
                    },
                },
            },
            {
                value: "2, 1",
                label: "Cow",
                symbol: {
                    type: "picture-marker",
                    url: "https://cdn-icons-png.flaticon.com/512/6165/6165370.png",
                    width: "25px",
                    height: "25px",
                    outline: {
                        color: [255, 255, 255],
                        width: 1,
                    },
                },
            },
            {
                value: "2, 2",
                label: "Goat",
                symbol: {
                    type: "picture-marker",
                    url: "https://cdn-icons-png.flaticon.com/512/8686/8686214.png",
                    width: "25px",
                    height: "25px",
                    outline: {
                        color: [255, 255, 255],
                        width: 1,
                    },
                },
            },
            {
                value: "3",
                label: "Slaughterhouse",
                symbol: {
                    type: "picture-marker",
                    url: "https://cdn-icons-png.flaticon.com/512/1995/1995607.png",
                    width: "25px",
                    height: "25px",
                    outline: {
                        color: [255, 255, 255],
                        width: 1,
                    },
                },
            },
            {
                value: "4",
                label: "Chicken",
                symbol: {
                    type: "picture-marker",
                    url: "https://cdn-icons-png.flaticon.com/512/1449/1449791.png",
                    width: "25px",
                    height: "25px",
                    outline: {
                        color: [255, 255, 255],
                        width: 1,
                    },
                },
            }
        ],
    };

It works for the cases with value: "2, 1" and value: "2, 2". When I remove field2, fieldDelimiter and value: "2, 1", and value: "2, 2", the remaining values work normally. i'm working with FeatureLayer Client-Side.
I will be grateful for any help you can provide.

[KristianEkenes]

I would try using the new uniqueValueGroups for this purpose. The way you declare which value belongs to which field is more explicit, so you're less likely to run into issues. Try this...

// This example groups categories under three headings:
// Commercial, Residential, and Other
layer.renderer = {
  type: "unique-value",
  field: "farmType",
  field2: "livestockType",
  fieldDelimiter: ", ",
  uniqueValueGroups: [{
    classes: [{
      label: "Pig",
      symbol: {
        type: "picture-marker",
        url: "https://cdn-icons-png.flaticon.com/512/776/776450.png",
        width: "25px",
        height: "25px",
        outline: {
            color: [255, 255, 255],
            width: 1,
        },
      },
      values: {
        value: 1,
        value2: null,
        value3: null
      }
    }, {
      label: "Cow",
      symbol: {
        type: "picture-marker",
        url: "https://cdn-icons-png.flaticon.com/512/6165/6165370.png",
        width: "25px",
        height: "25px",
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      },
      values: {
        value: 2,
        value2: 1,
        value3: null
      }
    }, {
      label: "Goat",
      symbol: {
        type: "picture-marker",
        url: "https://cdn-icons-png.flaticon.com/512/8686/8686214.png",
        width: "25px",
        height: "25px",
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      },
      values: {
        value: 2,
        value2: 2,
        value3: null
      }
    }, {
      label: "Slaughterhouse",
      symbol: {
        type: "picture-marker",
        url: "https://cdn-icons-png.flaticon.com/512/1995/1995607.png",
        width: "25px",
        height: "25px",
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      },
      values: {
        value: 3,
        value2: null,
        value3: null
      }
    }, {
      label: "Chicken",
      symbol: {
        type: "picture-marker",
        url: "https://cdn-icons-png.flaticon.com/512/1449/1449791.png",
        width: "25px",
        height: "25px",
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      },
      values: {
        value: 4,
        value2: null,
        value3: null
      }
    }]
  }]
};

[LazyDogz]

Sorry for the late response. But I'm using version 4.24, so it has some errors as follows:

[esri.core.Accessor] Accessor#set Invalid property value, value needs to be one of 'esri.renderers.HeatmapRenderer', 'esri.renderers.SimpleRenderer', 'esri.renderers.UniqueValueRenderer', 'esri.renderers.ClassBreaksRenderer', 'esri.renderers.DotDensityRenderer', 'esri.renderers.DictionaryRenderer', 'esri.renderers.PieChartRenderer', or a plain object that can autocast (having .type = 'heatmap', 'simple', 'unique-value', 'class-breaks', 'dot-density', 'dictionary', 'pie-chart')

When I try to update to version 4.26, some dijits like dijit/MenuItem cannot work. Is there any way to use UniqueValueRenderer in my case? Thank you in advance.

[KELLY-ILE]

Hey @LazyDogz :). 

Are you still experiencing your issue? If so, why don't you try the following:

 let rendererTest = {
        type: "unique-value",
        field: "farmType",
        field2: "livestockType",
        fieldDelimiter: ", ",
        uniqueValueInfos: [
            {
                value: "1, <Null>",
                label: "Pig",
                symbol: {
                    type: "picture-marker",
                    url: "https://cdn-icons-png.flaticon.com/512/776/776450.png",
                    width: "25px",
                    height: "25px",
                    outline: {
                        color: [255, 255, 255],
                        width: 1,
                    },
                },
            },
            {
                value: "2, 1",
                label: "Cow",
                symbol: {
                    type: "picture-marker",
                    url: "https://cdn-icons-png.flaticon.com/512/6165/6165370.png",
                    width: "25px",
                    height: "25px",
                    outline: {
                        color: [255, 255, 255],
                        width: 1,
                    },
                },
            },
            {
                value: "2, 2",
                label: "Goat",
                symbol: {
                    type: "picture-marker",
                    url: "https://cdn-icons-png.flaticon.com/512/8686/8686214.png",
                    width: "25px",
                    height: "25px",
                    outline: {
                        color: [255, 255, 255],
                        width: 1,
                    },
                },
            },
            {
                value: "3, <Null>",
                label: "Slaughterhouse",
                symbol: {
                    type: "picture-marker",
                    url: "https://cdn-icons-png.flaticon.com/512/1995/1995607.png",
                    width: "25px",
                    height: "25px",
                    outline: {
                        color: [255, 255, 255],
                        width: 1,
                    },
                },
            },
            {
                value: "4, <Null>",
                label: "Chicken",
                symbol: {
                    type: "picture-marker",
                    url: "https://cdn-icons-png.flaticon.com/512/1449/1449791.png",
                    width: "25px",
                    height: "25px",
                    outline: {
                        color: [255, 255, 255],
                        width: 1,
                    },
                },
            }
        ],
    };

The main edits are to

Line 8:

value: "1, <Null>",

Line 50 :

value: "3, <Null>",

And line 64: 

value: "4, <Null>",

Hope this helps!