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”,
“”
]
}
]
}
]
}
]
}
]
}
]
}
}
}
]
}
]
}
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”, “” ] } ] } ] } ] } ] } ] } } } ] } ]} Read More
