How to add custom hex color to SharePoint list choice pills?

I'm afraid I'm too bad at coding. I've tried to go through all the materials but seem to not be able to land on a solution. Basically just need to assign custom hex colors to each of the choice optio...

developer

Rob_Elliott

Aug 22, 2023

JohnBloggs950 you can simplify the JSON consderably by using the following instead, adjusting it as necessary. It's also easier to read & debug.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "color": "=if(@currentField == 'Sales', '#ff0000', if(@currentField == 'Marketing', '#006aff', if(@currentField == 'Warehouse', '#b882d7','green')))",
    "background-color": "#f8f8f8",
    "border": "1px solid",
    "box-sizing": "border-box",
    "padding": "4px 8px 5px",
    "border-radius": "16px",
    "margin": "4px"
  }
}

The result is:

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

JohnBloggs950

Copper Contributor

Oct 09, 2023

I used this code, it works great for a list choice column but not for SharePoint library choice column (with choice pill colors). All choices look green (default color) Rob_Elliott LeonPavesic

{
  "$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__]"
    }
  ]
}

ganeshsanap

MVP

Oct 10, 2023

JohnBloggs950

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

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

Please consider giving a Like if my post helped you in any way.

Forum Discussion

How to add custom hex color to SharePoint list choice pills?

Resources