1

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",  
                    ""  
                  ]  
                }  
              ]  
            }  
          ]  
        }  
      ]  
    }  
  }  
}  
2
  • @theChrisKent I appreciate the quick response! I love that the code you posted is 10x simpler than what I was using, but when I try formatting the column with that, all of the text in the column disappears and no background color is applied. This is something I encountered with some other examples of the code I found online, but I haven't been able to figure out why it does that.
    – Jeremy
    Jan 4, 2022 at 18:46
  • In the format I posted the default will be no background color (so white) with a text color of white. Only when the values are literally Green, Red, Yellow, or Blue will there be a background color. Verify your field's values match the conditions and consider adding a default (where there's just '' in the last condition) to see what's being applied. Jan 4, 2022 at 19:50

2 Answers 2

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!

0

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')))"
  }
}

enter image description here

enter image description here

Reference:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.