Forum Discussion
How to add custom hex color to SharePoint list choice pills?
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)
I realized that you are not the person I responded to. I was responding to LeonPavesic's answer (which wasn't working). Yours is actually, I marked it best response 🙂
In fact, yours worked beautifully, one line and easy to read and debug. Really appreciate it. Worked like a charm
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__]"
}
]
}
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.
