Forum Discussion
Using alternating row formatting in grouped list
ganeshsanap Thank you for taking the time to help me, Ganesh. In my original question, I neglected to include some important information (duh). I formatted my grouped view using JSON code (see below) that I found online so it would look better than the default format. I want to add the alternate row formatting code to this but I'm still learning JSON and not sure how to do it. I really appreciate your help!
{
asapboston Use JSON like this:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"additionalRowClass": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "%",
"operands": [
"@rowIndex",
2
]
},
0
]
},
"sp-css-backgroundColor-BgLightGray30",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "%",
"operands": [
"@rowIndex",
2
]
},
1
]
},
"sp-css-backgroundColor-noFill",
""
]
}
]
},
"groupProps": {
"headerFormatter": {
"elmType": "div",
"style": {
"flex-wrap": "wrap",
"display": "flex",
"box-sizing": "border-box",
"padding": "2px 2px 2px 2px",
"border-radius": "3px",
"align-items": "center",
"white-space": "nowrap",
"overflow": "hidden",
"margin": "1px 2px 2px 1px"
},
"children": [
{
"elmType": "span",
"style": {
"padding": "5px 5px 5px 5px",
"font-weight": "450",
"font-size": "13pt",
"color": "teal"
},
"txtContent": "@group.fieldData.displayValue"
}
]
},
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"txtContent": "='has ' + @group.count + if(@group.count > '1', ' employees', ' employee')",
"style": {
"font-weight": "400"
}
}
]
}
]
}
}Output:
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.
For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs
I did try this but it doesn't return a true alternating pattern. Let me ask this, would it be possible, instead, to display a background only on the grouped header rows? Like this:
asapboston Yes, it is possible to add background color to grouping in SharePoint list. Use below code for your list view formatting:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "groupProps": { "headerFormatter": { "elmType": "div", "txtContent": "@group.fieldData.displayValue", "style": { "padding": "5px 10px", "background-color": "#d3d3d3", "color": "#00bfff", "font-weight": "bold", "position": "absolute", "left": "80px", "right": "0px", "top": "0px", "bottom": "0px" } } } }Output:
Note: You might need to adjust value for left styling property so that you can see the expand/collapse option on the left. More information at: Lists: group headers 100% width
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.
For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs
- Thank you Ganesh!!