Hi @JohnBloggs950,
JSON formatting allows you to control how data is displayed in SharePoint lists. In your case, you want to change the appearance of choice field values, including adding custom colors, borders, and font colors. The key here is to use conditional logic to apply different styles based on the choice field value.
You can try to use this JSON code snippet for achieving this:
{
"$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"
}
]
}
- We define a div element to wrap the choice field values.
- Each choice field value is represented by a child div element.
- We use the elmType property to specify the HTML element type.
- The style property allows us to set various CSS styles for each choice.
- We use the operator property to apply conditional logic. If the choice matches a specific value (e.g., "Sales" or "Marketing"), the corresponding styles are applied.
- If the choice doesn't match any conditions, default styles are applied.
You need to adjust the color codes, font styles, and other CSS properties as needed to match your design preferences.
Please click Mark as Best Response & Like if my post helped you to solve your issue.
This will help others to find the correct solution easily. It also closes the item.
If the post was useful in other ways, please consider giving it Like.
Kindest regards,
Leon Pavesic
