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://filestore.community.support.microsoft.com/api/images/73ea560e-6bff-46ec-82ee-ed51b516fc83?upload=true&fud_access=wJJIheezUklbAN2ppeDns8cDNpYs3nCYjgitr%2bfFBh2dqlqMuW7np3F6Utp%2fKMltnRRYFtVjOMO5tpbpW9UyRAwvLeec5emAPixgq9ta07Dgnp2aq5eJbnfd%2fU3qhn54YpxjZvXtqPq9%2fhTIzSH9Kk6xAkRKsokXABEtqTVHAA9U9qfbdsFu7iSIE5sotrY%2fZCzC5hxMgMtfnze%2f3MNM1isZpsKQS9NA6zeWN6cQDDuVv1x7idBxk%2fbcWC%2fFR86xRzos6eeHKjFFsvhRVYJQqofGyuimbLeyh%2bbv1Il7ZXzBvWUhLSQ4H3YENNvkmVtshRWMERHLirjV2wT%2bqTBBHk1KDKQMcKMoSZvMxMrfwqhSDV52Q1Ol82subq1FYo5VRhO0oaCkraNrX7dCsGjrQE0IrzWLwx0BshnwMzn9UWQ%3d)

However, I want the second level headers to display the Display Name of the user in the User column. Hence, I altered my JSON as follows:

"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://filestore.community.support.microsoft.com/api/images/2dbbd50a-c25b-4c6e-b016-c9abe9eba203?upload=true&fud_access=wJJIheezUklbAN2ppeDns8cDNpYs3nCYjgitr%2bfFBh2dqlqMuW7np3F6Utp%2fKMltnRRYFtVjOMO5tpbpW9UyRAwvLeec5emAPixgq9ta07Dgnp2aq5eJbnfd%2fU3qhn54YpxjZvXtqPq9%2fhTIzSH9Kk6xAkRKsokXABEtqTVHAA9U9qfbdsFu7iSIE5sotrY%2fZCzC5hxMgMtfnze%2f3MNM1isZpsKQS9NA6zeWN6cQDDu9oJtrR976R4HPRQ2Fm%2banfBNvjapY%2fvcGiegQ4C4jDZjGWnk33ACIbZtExBWiESW5Ae3q%2fAyKfOfrRhLlRmLHkCANQMzOuw2ixm5%2bDGZIooCnuRAxHqyqfdqikF4psaxIO3eKPsfS3EuLlDkPxa%2bowQJcY1gl64yPCXXApXri3Kso8Otj2ne8SM63zi5SljM%3d)

Does anyone know how I can return both the Status column values in the first level headers and also the display name of the User column in the second level headers?

Thank you very much in advance!

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.