SharePoint library choice column formatting

[JohnBloggs950]

I am trying to format a JSON for a Choice column that has been set to "choice pills". I am trying to change things like font color, background color, border etc. So far trying to do this but doesn't seem to work:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "forEach": "__INTERNAL__ in @currentField",
      "elmType": "div",
      "style": {
	    "color": "=if(@currentField == 'Sales', '#ff0000', if(@currentField == 'Marketing', '#006aff', if(@currentField == 'Warehouse', '#b882d7','green')))",
        "background-color": "=if(@currentField == 'Sales', '#FAA0A0', if(@currentField == 'Marketing', '#c1d3f7', if(@currentField == 'Warehouse', '#e4c1f7','#DAF7A6')))",
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "margin": "4px 4px 4px 4px"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$__INTERNAL__]",
                "Sales"
              ]
            },
            "sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$__INTERNAL__]",
                    "Marketing"
                  ]
                },
                "sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$__INTERNAL__]",
                        "Warehouse"
                      ]
                    },
                    "sp-css-backgroundColor-BgGold sp-css-color-GoldFont",
                    "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "[$__INTERNAL__]"
    }
  ]
}

[#2]

@JohnBloggs950 

What is the issue exactly? Where are you facing issue while applying color or background color? 

You may need to change the classes like "sp-css-backgroundColor-BgCornflowerBlue" in JSON as well which might be overwriting your colors applied via color and background-color properties.

You can also use the classes given here instead of using hex colors if these classes suits your requirements: SharePoint Online CSS Classes 

---

Please click Mark as Best Response & Like 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.

[#3]

I'm trying to apply custom background colors using the specific hex colors but it only defaults to the hex color "green" or "#DAF7A6" as per this json code. How can I override the classes to use my own hex colors for background color of choice pills? (In a SharePoint library column, not list)

[#4 · Accepted solution]

@JohnBloggs950 

Use [$__INTERNAL__] instead of @currentField in conditions like: 

=if([$__INTERNAL__] == 'Sales', '#ff0000', if([$__INTERNAL__] == 'Marketing', '#006aff', if([$__INTERNAL__] == 'Warehouse', '#b882d7','green')))

---

Please click Mark as Best Response & Like 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.