How to write JSON for double tier grouping?

Question

I'm trying to format the way my grouping appears in Sharepoint Online (remove column heading in two-layer grouping). It currently displays this way:

I have the following JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "padding-left": "12px",
        "font-size": "16px",
        "font-weight": "400",
        "cursor": "pointer",
        "outline": "0px",
        "white-space": "nowrap",
        "text-overflow": "ellipsis"
      },
      "children": [
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "span",
              "style": {
                "padding": "5px 5px 5px 5px"
              },
              "txtContent": "@group.fieldData.displayValue.lookupValue"
            }
          ]
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "row",
                "justify-content": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "=' (' + @group.count + ')'"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

When I apply it, it removes my headings appropriately but it also removes the date at 2nd level grouping. Would anyone be able to help me to fix this? Ideally, it would also group/display dates as MMM-YYYY (without the day).

Many thanks!

Answer 1

You are only able to specify a single headerFormatter regardless of the number of groupings you might have. You can use the @group.columnDisplayName to distinguish between which column you are applying group formatting for.

Here's a version of your format that should meet your requirements:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "padding-left": "12px",
        "font-size": "16px",
        "font-weight": "400",
        "cursor": "pointer",
        "outline": "0px",
        "white-space": "nowrap",
        "text-overflow": "ellipsis"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "padding": "5px 5px 5px 5px",
            "display": "=if(@group.columnDisplayName == 'Lookup', 'inherit', 'none')"
          },
          "txtContent": "@group.fieldData.lookupValue"
        },
        {
          "elmType": "span",
          "style": {
            "padding": "5px 5px 5px 5px",
            "display": "=if(@group.columnDisplayName == 'Date', 'inherit', 'none')"
          },
          "txtContent": "=if(getMonth(@group.fieldData)==0,'JAN',if(getMonth(@group.fieldData)==1,'FEB',if(getMonth(@group.fieldData)==2,'MAR',if(getMonth(@group.fieldData)==3,'APR',if(getMonth(@group.fieldData)==4,'MAY',if(getMonth(@group.fieldData)==5,'JUN',if(getMonth(@group.fieldData)==6,'JUL',if(getMonth(@group.fieldData)==7,'AUG',if(getMonth(@group.fieldData)==8,'SEP',if(getMonth(@group.fieldData)==9,'OCT',if(getMonth(@group.fieldData)==10,'NOV','DEC'))))))))))) + '-' + getYear(@group.fieldData)"
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "row",
                "justify-content": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "=' (' + @group.count + ')'"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

The key difference is that 2 different elements are used and are turned on conditionally using the display style based on which column is being formatted. This could have been written as a single element with the if statement taking place in the txtContent for the shared element. This would work in many scenarios, unfortunately lookups create a unique issue for us in that when using the sub values (lookupValue) on values that don't have sub values can cause the entire expression to break. So... it's easier to just split it into 2 elements. It's a bit of redundancy but a little easier to read as well.

In the sample above, the column display names were Date and Lookup which are very unlikely to be the case in your environment. So change those 2 spots to match the correct display name.