Using JSON to conditionally format multiple values the same color - SharePoint Online

Question

I have no experience with JSON and have been trying to conditionally format a column to display certain colors depending on the value. The code I found below has worked for me when I tested it, but I'm wondering if there's a way to make it so several values display the same color (there are 11 choices for my column, and I'm trying to make it so 5 choices of the column are yellow, 4 are green, 1 is blue and 1 is red). Is there a simple way to add those choices in to display each color or do I have to add a new set of lines for each? And if I do have to add a set of lines for each choice, what is the proper syntax for that (I have tried unsuccessfully)?

  {  
  "elmType": "div",  
  "txtContent": "@currentField",  
  "style": {  
    "color": "#fff",  
    "padding-left": "14px",  
    "background-color": {  
      "operator": "?",  
      "operands": [  
        {  
          "operator": "==",  
          "operands": [  
            "@currentField",  
            "Green"  
          ]  
        },  
        "#2ECC71",  
        {  
          "operator": "?",  
          "operands": [  
            {  
              "operator": "==",  
              "operands": [  
                "@currentField",  
                "Red"  
              ]  
            },  
            "#E74C3C",  
            {  
              "operator": "?",  
              "operands": [  
                {  
                  "operator": "==",  
                  "operands": [  
                    "@currentField",  
                    "Yellow"  
                  ]  
                },  
                "#F1C40F",  
                {  
                  "operator": "?",  
                  "operands": [  
                    {  
                      "operator": "==",  
                      "operands": [  
                        "@currentField",  
                        "Blue"  
                      ]  
                    },  
                    "#76448A",  
                    ""  
                  ]  
                }  
              ]  
            }  
          ]  
        }  
      ]  
    }  
  }  
}  

Answer 1

Fortunately, we can simplify the expressions a bit to make it less lines. The operator/operands stuff is hard to read and can be difficult to mix in a few extra operators like we'll need to do:

{  
  "elmType": "div",  
  "txtContent": "@currentField",  
  "style": {  
    "color": "#fff",  
    "padding-left": "14px",  
    "background-color": "=if(@currentField == 'Green', '#2ECC71', if(@currentField == 'Red', '#E74C3C', if(@currentField == 'Yellow', '#F1C40F', if(@currentField == 'Blue', '#76448A', ''))))"
  }
}

The above should have the exact same effect as the JSON you posted. If you'd like to add multiple conditions for a color you can use the or (||) operator. For instance, if you wanted the color to be #2ECC71 when the value is either Green or Olive you could adjust the expression like this:

    "background-color": "=if(@currentField == 'Green' || @currentField == 'Olive', '#2ECC71', if(@currentField == 'Red', '#E74C3C', if(@currentField == 'Yellow', '#F1C40F', if(@currentField == 'Blue', '#76448A', ''))))"

You can do the same for any of the if statements above.

JSON can be awesome, but it can certainly be confusing at times. Good luck!

Answer 2

Please use the below JSON formatting:

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",  
  "txtContent": "@currentField",  
  "style": {  
    "color": "#fff",  
    "padding-left": "14px",  
    "background-color": "=if(@currentField == 'A1' || @currentField == 'B2' || @currentField == 'C3' || @currentField == 'D4' || @currentField == 'E5','yellow',if(@currentField == 'F6' || @currentField == 'G7' || @currentField == 'H8' || @currentField == 'I9','green',if(@currentField == 'J10','blue','red')))"
  }
}

Reference:

• Use column formatting to customize SharePoint