SharePoint List JSON Grouped View Formatting

Question

Hi all,

I am currently formatting the JSON for my SharePoint List which has two levels of groupings.

First level: grouped by Status column (Either In Progress or Completed).

Second level: grouped by a User column (Person field).

I have the following JSON for the content that will be displayed in the heading:

"txtContent": "=if(@group.fieldData.displayValue == 'In Progress' || @group.fieldData.displayValue == 'Completed',@group.fieldData.displayValue,@group.fieldData.displayValue)"

This returns the following result:

[

](https://learn-attachment.microsoft.com/api/attachments/73ea560e-6bff-46ec-82ee-ed51b516fc83?platform=QnA"lang-json">"txtContent": "=if(@group.fieldData.displayValue == 'In Progress' || @group.fieldData.displayValue == 'Completed',@group.fieldData.displayValue,@group.fieldData.title)"

This returns the display names of the users, but the Status column values then disappear from the first level headers (names hidden for privacy):

[

](https://learn-attachment.microsoft.com/api/attachments/2dbbd50a-c25b-4c6e-b016-c9abe9eba203?platform=QnA

Answer 1

Hi @JD ,

Thanks for your cooperation again! Try the following JSON code on your side:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": {
    "hideFooter":true,
    "headerFormatter": {
     "elmType": "div",
        "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"
      },
       "attributes": {
          "class": "=if(@group.fieldData == 'In Progress', 'sp-css-backgroundColor-themePrimary',if(@group.fieldData == 'Completed', 'sp-css-backgroundColor-themeSecondary','sp-css-backgroundColor-white'))"
        },
      "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",
          "style": {
            "padding": " ",
            "font-weight": "500",
            "display": "=if(@group.columnDisplayName == 'Status', 'flex', 'none')"
          },
          "txtContent": "=if(@group.fieldData.displayValue == 'In Progress' || @group.fieldData.displayValue == 'Completed',@group.fieldData.displayValue,@group.fieldData.displayValue)"
        },
        {
          "elmType": "div",
          "style": {
            "padding": " ",
            "font-weight": "500",
            "display": "=if(@group.columnDisplayName == 'Person', 'flex', 'none')"
          },
          "txtContent": "@group.fieldData.title"
        },
        {
          "elmType": "div",
          "children": [
          {
            "elmType": "span",
            "attributes": {

            },
            "style": {
              "max-width": "24px",
              "max-height": "24px",
              "margin-top": "2px",
              "border-radius": "2px"
            }
          }
          ]
        }
      ]
    }
  }
}

Test result:

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.