Forum Discussion
Using alternating row formatting in grouped list
asapboston Follow below detailed steps:
- First of all group by required column: Click on column name/header and select Group by option:
- Then click on "Switch view options" dropdown from top right corner (where list view name is shown) and then select "Format current view":
- Then choose Alternating row styles, apply styling as per your requirements and click Save:
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
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!
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json","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"}}]}]}}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:
