SharePoint Online list - remove column name from grouped view

Question

I'm trying to remove column names from the grouped list. I followed the instructions given here: SharePoint Online list - format group headers to remove column name but I seem to have another issue.

I use project names that come from another sharepoint list. With the original JSON I got Object Object instead of Project name.

When I replaced @group.fieldData.displayValue with @group.fieldData.title however, it just returned blank for me as in 'black space (26)'. Any ideas? Thank you!

Answer 1

For grouping on lookup columns, use following JSON in view formatting:

{
  "$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 + ')'"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

Use @group.fieldData.displayValue.lookupValue instead of @group.fieldData.displayValue.

Documentation: View formatting - List layout customizations