Forum Discussion

asapboston's avatar
asapboston
Copper Contributor
Apr 22, 2023

Using alternating row formatting in grouped list

Is it possible to have alternating row colors with a grouped list? If so, could someone point me to the code?  Thank you.

SharePoint Online
  • ganeshsanap's avatar
    ganeshsanap
    MVP
    Apr 22, 2023

    asapboston Follow below detailed steps:

    1. First of all group by required column: Click on column name/header and select Group by option: 
    2. Then click on "Switch view options" dropdown from top right corner (where list view name is shown) and then select "Format current view": 
    3. 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

    • asapboston's avatar
      asapboston
      Copper Contributor
      Apr 22, 2023

      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!

       

      {

      "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"
      }
      }
      ]
      }
      ]
      }
      }
      • ganeshsanap's avatar
        ganeshsanap
        MVP
        Apr 23, 2023

        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

  • ganeshsanap's avatar
    ganeshsanap
    MVP
    Apr 22, 2023

    asapboston Yes, it is possible. Also, you can configure it from SharePoint UI itself without using any custom JSON: 

    Documentation: Use view formatting to customize SharePoint 

    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

Resources