2

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

enter image description here

1

2 Answers 2

0

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:

enter image description here


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:

enter image description here


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:

Build custom group headers and footers

0

This List View formatting applies a 'full width' background for me:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "txtContent": "= @group.columnDisplayName +' >  ' + @group.fieldData.displayValue",
      "style": {
        "background-color": "#333",
        "color": "#fff",
        "font-weight": "normal",
        "width": "100%",
        "padding": "10px 20px",
        "border-radius": "5px",
        "margin-left": "-30px"
      }
    }
  }
}

Caveats:

  • Not sure if it makes a difference, but I am using the 'modern' list view, ie where ?env=WebViewList is appended to the end of the URL.

  • The JSON styling above doesn't seem to support grouping of more than one column, as documented here.

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.