Forum Discussion
SharePoint List Choice Pills Hex Colors
How and where do I modify the following code so I can set my own colors for the background and text using Hex codes like #FF0000? It seems to be using CSS color coding. Apologies for the long code sniplet.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"flex-wrap": "wrap",
"display": "flex",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"style": {
"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": [
"[$State]",
""
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Cancelled"
]
},
"sp-css-backgroundColor-BgDarkRed sp-css-borderColor-WhiteFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Completed"
]
},
"sp-css-backgroundColor-BgGreen sp-css-borderColor-WhiteFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"On-Hold"
]
},
"sp-css-backgroundColor-BgCoral",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Queued"
]
},
"sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Work in Progress"
]
},
"sp-css-backgroundColor-BgTeal sp-css-borderColor-MintGreenFont",
"sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
]
}
]
}
]
}
]
}
]
}
]
}
},
"children": [
{
"elmType": "span",
"style": {
"line-height": "16px",
"height": "14px",
"display": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
""
]
},
"none",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Cancelled"
]
},
"inherit",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Completed"
]
},
"inherit",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"On-Hold"
]
},
"inherit",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Queued"
]
},
"inherit",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Work in Progress"
]
},
"inherit",
"none"
]
}
]
}
]
}
]
}
]
}
]
}
},
"attributes": {
"iconName": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
""
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Cancelled"
]
},
"ErrorBadge",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Completed"
]
},
"Like",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"On-Hold"
]
},
"Warning",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Queued"
]
},
"Calendar",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Work in Progress"
]
},
"Forward",
""
]
}
]
}
]
}
]
}
]
}
]
},
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
""
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Cancelled"
]
},
"sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Completed"
]
},
"sp-css-color-WhiteFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"On-Hold"
]
},
"sp-css-color-CoralFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Queued"
]
},
"sp-css-color-MintGreenFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Work in Progress"
]
},
"sp-css-color-WhiteText",
""
]
}
]
}
]
}
]
}
]
}
]
}
}
},
{
"elmType": "span",
"style": {
"overflow": "hidden",
"text-overflow": "ellipsis",
"padding": "0 3px"
},
"txtContent": "[$State]",
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
""
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Cancelled"
]
},
"sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Completed"
]
},
"sp-css-color-WhiteFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"On-Hold"
]
},
"sp-css-color-CoralFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Queued"
]
},
"sp-css-color-MintGreenFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$State]",
"Work in Progress"
]
},
"sp-css-color-WhiteText",
""
]
}
]
}
]
}
]
}
]
}
]
}
}
}
]
}
]
}
johncrouse62 you could add something like:
"width": "50%","margin-left": "15%"Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)
johncrouse62 format your State choice column selecting Advanced mode, delete the code that's already there and paste in the following - much shorter! - JSON, changing the colors to whatever you want:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "@currentField", "style": { "background-color": "=if(@currentField == 'Queued', '#d04cff', if(@currentField == 'On-Hold', '#ff6d6d', if(@currentField == 'Completed', '#f0750f', if(@currentField == 'Cancelled', '#8ad0ce','teal'))))", "color": "white", "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "border-radius": "20px" } }This is the result:
Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)Rob_Elliott, thx for the reply, works perfect. One last question. How do I set some sort of offset around the entire pill, so it does not fill the cell? I tried the margin property ... no go. Any thoughts? I included a screenie for reference. Just want to pull back the ends, radii, a bit from the edge of the cell.
johncrouse62 you could add something like:
"width": "50%","margin-left": "15%"Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)
