Forum Discussion
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 formatting at all, I lose the ability to click on the headers to filter by that group. This is despite having the default click custom row action included. The second issue is when I change the "hideSelection" field to true, the group heading jumps from it's normal position to half way down the width of the list. If tried setting different padding and position fields, but it always applies from this new position in the middle of the screen. Any advise would be appreciated!
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": 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"
},
"customRowAction": {
"action": "defaultClick"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"padding": "5px 5px 5px 5px"
},
"txtContent": "@group.fieldData.displayValue"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"txtContent": "=' (' + @group.count + ')'"
}
]
}
]
}
]
}
}
}
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)- 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.
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
The filter issue should be fixed by now.
