SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I have a SharePoint Online list with a groupby in the status field. Now I want to change the whole background of the groupby so that the status row has a different color. I have already applied JSON to this, but I don't get the entire background adjusted but only a border around the status field.
This is the current JSON: https://github.com/aprildunnam/ListFormatting/blob/master/GroupHeaderFormatSimple.json
Unfortunately, it is not possible to format group headers to color over the full width of the list.
Similar thread: Lists: group headers 100% width
But, you can add different background color for different status values as given below:
Add below code in style property of first div in headerFormatter:
"background-color": "yellow",
Like:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"groupProps": {
"hideFooter": false,
"headerFormatter": {
"elmType": "div",
"style": {
"background-color":"yellow",
"flex-wrap": "wrap",
"display": "flex",
"box-sizing": "border-box",
"padding": "4px 8px 5px 8px",
"border-radius": "6px",
"align-items": "center",
"white-space": "nowrap",
"overflow": "hidden",
"margin": "1px 4px 4px 1px"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"txtContent": "= @group.count",
"style": {
"padding": "5px 5px 5px 5px",
"font-weight": "500"
}
}
]
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"txtContent": "= @group.fieldData.displayValue +'(s) ' ",
"style": {
"padding": " ",
"font-weight": "500"
}
}
]
}
]
}
]
}
}
}
Output:
Conditional background color:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"groupProps": {
"hideFooter": false,
"headerFormatter": {
"elmType": "div",
"style": {
"background-color":"=if(@group.fieldData == 'Cases', 'yellow', if(@group.fieldData == 'Pallets', 'green', 'red'))",
"flex-wrap": "wrap",
"display": "flex",
"box-sizing": "border-box",
"padding": "4px 8px 5px 8px",
"border-radius": "6px",
"align-items": "center",
"white-space": "nowrap",
"overflow": "hidden",
"margin": "1px 4px 4px 1px"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"txtContent": "= @group.count",
"style": {
"padding": "5px 5px 5px 5px",
"font-weight": "500"
}
}
]
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"txtContent": "= @group.fieldData.displayValue +'(s) ' ",
"style": {
"padding": " ",
"font-weight": "500"
}
}
]
}
]
}
]
}
}
}
Output:
Additional:
If you want to use the predefined classes, check samples given in below Microsoft documentation where they have applied background color using class property:
