SharePoint List JSON Grouped View Formatting

Anonymous
2023-05-10T06:13:37.07+00:00

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:

[Image

](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):

[Image

](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!

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,273 questions
{count} votes

Accepted answer
  1. AllenXu-MSFT 18,361 Reputation points Microsoft Vendor
    2023-05-11T08:52:09.8266667+00:00

    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:

    User's image


    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.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful