1

I have been searching the web to try and find an answer to this question however, all pages seem to relate to just 1 column grouping.

I have a list of people who are grouped together as gangs and then for the company that they work for.

This page SharePoint Online list - format group headers to remove column name accomplishes the sort of view that I am looking for however, when I add the following JSON, the gang does not display:

    {
  "$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.title"
            }
          ]
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "row",
                "justify-content": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "=' (' + @group.count + ')'"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

However, if I leave @group.fieldData.displayValue it displays as [Object] [Object].

Display Value

enter image description here

What I am looking to achieve is the Company Name in a group without being preceded with "Company Name:" and also the Gang Name in a group without being preceded with "Gang Name:".

4
  • What is the data type of Company Name & Gang Name columns? Both have same data type or different data type? Mar 5, 2022 at 15:51
  • They are both look up columns to other Lists. On the other lists, they are single line of texts Mar 5, 2022 at 18:21
  • Try using @group.fieldData.lookupValue instead of @group.fieldData.DisplayValue. Let me know if it works for you. Mar 6, 2022 at 3:44
  • This works for me partially. I too have two columns grouping. First column is a lookup column (for which this solution works). The second group column in the same list is a calculated column. If I apply the above solution the second column- group header goes blank and only the count shows. How to resolve this?
    – Manoj Lobo
    Sep 27, 2022 at 1:00

1 Answer 1

0

In case of lookup columns, use @group.fieldData.lookupValue like given in below JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "debugMode": true,
  "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.lookupValue"
            }
          ]
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "row",
                "justify-content": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "=' (' + @group.count + ')'"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

Output:

Before applying JSON:

enter image description here

After applying JSON:

enter image description here

2
  • 1
    Brilliant, that has worked perfectly. Thank you Mar 7, 2022 at 8:57
  • Great, glad it worked for you. Mar 7, 2022 at 9:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.