JSON Formatting - IF Statement controls colors of JSON formatted list

[LandonJochim]

Hello,

I have a List Library with a Choice column. I want the background color of each item in my JSON formatted listed to change based on the selection from that Choice column

Choice Column title = "Organization"

Organization choices:

• Community Action
• Missouri Slope
• United Way

Community Action = Green color

Missouri Slope = Red color

United Way = Blue color

In the Class I want to add an IF statement to change the background color based on what [$Organization] is equal to

The two lines that will need this are:

"class": "ms-borderColor-greenDark ms-bgColor-greenDark"

"class": "ms-fontColor-greenDark ms-borderColor-greenDark ms-fontWeight-semibold ms-fontSize-l"

What I have so far just has greenDark showing all the time. 

Currently with the greenDark

Thanks in advance for any help!

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideListHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "button",
    "customRowAction": {
      "action": "defaultClick"
    },
    "attributes": {
      "class": "ms-bgColor-white ms-bgColor-neutralLight--hover"
    },
    "style": {
      "display": "inline-flex",
      "width": "100%",
      "margin": "8px 0",
      "padding": 0,
      "border": "none",
      "cursor": "pointer"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-borderColor-greenDark ms-bgColor-greenDark"
        },
        "style": {
          "min-width": "280px",
          "display": "flex",
          "border-width": "3px",
          "border-style": "solid",
          "box-sizing": "border-box",
          "align-items": "center"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "iconName": "giftbox",
              "class": "ms-fontSize-su ms-fontWeight-regular  ms-fontColor-white",
              "title": "[$Organization]"
            },
            "style": {
              "flex": "none",
              "padding": "12px",
              "padding-left": "18px",
              "height": "42px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "text-align": "left",
              "max-width": "200px"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-white",
                  "title": "[$Organization]"
                },
                "style": {
                  "margin-right": "12px",
                  "overflow": "hidden",
                  "white-space": "nowrap"
                },
                "txtContent": "[$Organization]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-white",
                  "title": "[$Title]"
                },
                "style": {
                  "margin-right": "12px",
                  "overflow": "hidden",
                  "white-space": "nowrap"
                },
                "txtContent": "[$Title]"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-fontColor-greenDark ms-borderColor-greenDark ms-fontWeight-semibold ms-fontSize-l"
        },
        "style": {
          "border-width": "3px",
          "border-style": "solid",
          "box-sizing": "border-box",
          "width": "100%",
          "text-align": "left",
          "padding": "21px 12px",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Gift]",
            "style": {
              "height": "24px"
            },
            "attributes": {
              "title": "[$Gift]"
            }
          }
        ]
      }
    ]
  }
}

[#2]

@LandonJochim You can use IF condition for class something like below:

"class": "=if([$Organization]='Community Action', 'ms-borderColor-greenDark ms-bgColor-greenDark', if([$Organization]='Missouri Slope', '<space separated red-color-classes>', if([$Organization]='United Way', '<space separated blue-color-classes>', '')))"

Where you can replace <space separated red-color-classes> and <space separated blue-color-classes> with the class names as per your requirement. you can add multiple comma separated classes at the same time.

Check below reference to know how you can use IF condition for "class":

Reference: Use column formatting to customize SharePoint 

---

Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.