Here, we are going to see how to perform conditional formatting using JSON in a SharePoint online list. Nowadays, many people are seeking for a code to format the SharePoint list to make it more attractive to the end users.
In this way, I just tried to format my list items with some color code and here is my code by which the background color will get changed based on the item values.
Here, I have created one list with one column called colors and I have entered some color name, so based on the color name, it will change the background color.
![]()
Here is the JSON code to change the background color and text color as well. You can just copy and paste it.
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"color": "#fff",
"padding-left": "14px",
"background-color": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Green"
]
},
"#2ECC71",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Red"
]
},
"#E74C3C",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Yellow"
]
},
"#F1C40F",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Purple"
]
},
"#76448A",
""
]
}
]
}
]
}
]
}
}
}
You can add the JSON code in that particular column in two ways,
- Navigate to list setting -> column -> then add JSON code
- You can click the title of column in list view itself then column setting and format this column and JSON code editor will open on the right of the screen
![]()
And the final view of the list would be like below.
![]()