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)
JohnBloggs950 when you say it is not working, what is not working? What is the JSON code you are using?
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.
Rob_Elliott I just copy pasted the one you shared into my SharePoint format column JSON editor and the Preview button remained disabled.
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "flex-wrap": "wrap" }, "children": [ { "elmType": "div", "style": { "padding": "4px 8px", "border-radius": "16px", "margin": "4px", "font-weight": "bold", "color": { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Sales" ] }, "#ff0000", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Marketing" ] }, "#006aff", "#000000" // Default font color ] } ] }, "background-color": { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Sales" ] }, "#ff0000", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Marketing" ] }, "#006aff", "#ffffff" // Default background color ] } ] }, "border": { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Sales" ] }, "1px solid #ff0000", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Marketing" ] }, "1px solid #006aff", "1px solid #000000" // Default border color ] } ] } }, "txtContent": "@currentField" } ] }- YOur JSON is totally different to what I pasted. Delete what you have and paste in what I posted!
