Arcade expression in Uniquevalue

[kawishabbas]

Hello,

I want to symbolize my data on behalf of two fields. One is status field and other is category field. I try to used arcade expression for uniqueValueInfos to render the layer but unfortunately it is not working. Please help me to figure out my mistake.

Here is source code.

Thanks

 const name = "$feature.alarmstate"
const cat = "$feature.category"
        
const valueExpression = `When( ${name} == '0' AND ${cat} == 'VIP', 0, ${name} == '1' AND ${cat} == 'VIP', 0,
            ${name} == '2' AND ${cat} == 'VIP', 0, ${name} == '3' AND ${cat} == 'VIP', 0, 
            ${name} == '4' AND ${cat} == 'VIP', 0, 
            ${name} == '0' AND ${cat} == 'Ordinary', 1, ${name} == '1' AND ${cat} == 'Ordinary', 2,
            ${name} == '2' AND ${cat} == 'Ordinary', 3, ${name} == '3' AND ${cat} == 'Ordinary', 4,
            ${name} == '4' AND ${cat} == 'Ordinary', 5)`

        var rendererCheck = {
            type: "unique-value", 
            //field: "alarminfo",
            valueExpression:valueExpression,
            uniqueValueInfos: [
                {
                    value: "0",
                    symbol: {
                        type: "picture-marker", 
                        url: "images/vip.png",
                        width: "30px",
                        height: "15px"
                    }
                }, {

                    value: "1",
                    symbol: {
                        type: "simple-marker", 
                        style: "diamond",
                        color: "green",
                        size: "10px",
                        outline: { 
                            color: [ 255, 255, 255, 1 ],
                            width: 0.4
                          }
                    }
                }, {

                    value: "2",
                    symbol: {
                        type: "simple-marker", 
                        style: "diamond",
                        color: "blue",
                        size: "10px",
                        outline: { 
                            color: [ 255, 255, 255, 1 ],
                            width: 0.4
                          }
                    }
                }, {

                    value: "3",
                    symbol: {
                        type: "simple-marker", 
                        style: "diamond",
                        color: "red",
                        size: "10px",
                        outline: { 
                            color: [ 255, 255, 255, 1 ],
                            width: 0.4
                          }
                    }
                }, {

                    value: "4",
                    symbol: {
                        type: "simple-marker", 
                        style: "diamond",
                        color: "black",
                        size: "10px",
                        outline: { 
                            color: [ 255, 255, 255, 1 ],
                            width: 0.4
                          }
                    }
                }, {

                    value: "5",
                    symbol: {
                        type: "simple-marker", 
                        style: "diamond",
                        color: "Yellow",
                        size: "10px",
                        outline: { 
                            color: [ 255, 255, 255, 1 ],
                            width: 0.4
                          }
                    }
                }
            ]
        };
        
        customerLayer.renderer =rendererCheck

[JoseBanuelos · Accepted solution]

Hello @kawishabbas ,

The issue in the valueExpression you have there is that you are using AND instead of &&. Also you need a default value at the end of the When() method in case all of the conditions resolve to false. Here is an example of a valid valueExpression using two fields, similar to what you have. The 10 at the end is the default value in case all of the expressions return false.

const name = "$feature.state_name";
const pop = "$feature.pop2000";

const valueExpression = `When(${pop} < 20000, 0, 
${pop} > 20000 && ${pop} < 60000, 1, 
${pop} > 60000 && ${pop} < 100000, 2, 
${pop} > 100000 && ${name} == 'California', 3,
${pop} > 100000 && ${name} == 'Texas', 4, 10)`;

const renderer = {
  type: 'unique-value',
  field2: "pop2000",
  valueExpression: valueExpression,
  uniqueValueInfos: [
    {
      value: 0,
      symbol: {
        type: "simple-fill",
        color: "#2D2670",
        style: "solid",
        outline: {
          width: 2,
          color: "#ffffff"
        }
      }
    }, {
      value: 1,
      symbol: {
        type: "simple-fill",
        color: "#FFBA39",
        style: "solid",
        outline: {
          width: 2,
          color: "#ffffff"
        }
      }
    } ...
  ]
} 

Here is a codepen of a sample application with this working. Sample App.

Thanks,

Jose

[kawishabbas]

Thank you @JoseBanuelos  to figure out the mistake.

Blessings