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

1 Answer 1

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

Your Answer

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

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