1

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

0

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, privacy policy and cookie policy

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