1

Is it possible in SharePoint Online to set list row colors only on the grouped header rows?

I'm hoping I can format the grouped list like this?

enter image description here

2
  • What is the data type of column on which you have applied grouping, single line of text or person or group? Apr 26, 2023 at 3:08
  • Hi @DLM, does my response given below works for you? If yes, please Upvote(^) & accept as an Answer as it helped you & it will help others with similar question in future. Apr 27, 2023 at 5:19

2 Answers 2

0

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:

enter image description here

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

1
  • 1
    Thank you Ganesh! This is perfect!
    – DLM
    May 3, 2023 at 17:45
0

You can try this:

Click on Format View from top right corner of list. Copy and paste JSON code from below to the editor.

enter image description here

background-color attribute will determine the background color.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": 
  {
    "headerFormatter": 
    {
      "elmType": "div",
      "txtContent": "@group.fieldData.displayValue",
        "style": {
          "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",
          "background-color": "gray"
        }
    }
  }
}

Here are more details from Microsoft official documentation:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.