Arcade expression in Uniquevalue

366
2
Jump to solution
07-09-2021 06:23 AM
kawishabbas
New Contributor III

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

 

0 Kudos
1 Solution

Accepted Solutions
JoseBanuelos
Esri Contributor

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

View solution in original post

2 Replies
JoseBanuelos
Esri Contributor

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
New Contributor III

Thank you @JoseBanuelos  to figure out the mistake.

Blessings