Problems with Group Header Formatting in Sharepoint List

I'm having an couple of issues with formatting the grouped headers of a sharepoint list where the JSON formatting seems to be having an odd effect. The first thing, is when I apply any JSON formattin...

Microsoft Lists

SharePoint Online

Rob_Elliott

Bronze Contributor

ryan_willshear this might have something to do with the recent/ongoing change to having the Microsoft Lists experience instead of the old SharePoint list experience. I am not experiencing the issues you face when using the following JSON which you might want to try:

{
  "$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",
        "background-color": "#fffdd0"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "Link"
          },
          "style": {
            "max-width": "24px",
            "max-height": "24px",
            "margin-top": "2px",
            "border-radius": "2px"
          }
        },
        {
          "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",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "row",
                "justify-content": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "=  @group.fieldData.displayValue +' links  ' ",
                  "style": {
                    "padding": " ",
                    "font-weight": "500"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

It still allows filtering on columns:

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)

ryan_willshear

Copper Contributor

Jun 19, 2024

That does seem to be part of the issue yes. I tried applying the formatting on the list in sharepoint, rather than in Microsoft lists and voila the heading behaves as expected thank you! For the filter, apologies I wasn't clear initially. I meant the functionality of clicking on the group header and the filter automatically applies, rather than using the Filter button in the ribbon.

ShaundaR4144
Copper Contributor
Oct 16, 2024
I am having a similar issue since MS changed their lists. My group formatting doesn't start until the second column now. Looks really odd. Are you saying it could be because the "allow individual item checkboxes" is UNchecked? That seems to be the difference in my original lists and if I create a new one. I really don't want that column on....argh

Forum Discussion

Problems with Group Header Formatting in Sharepoint List

Share

Resources