Documentation:
On the topic of List View formatting in Microsoft lists, specifically group headings:
https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-group-formatting
Desired Behaviour:
First and second level group headings can be styled using List View formatting.
Actual Behaviour:
The styling works if the view is grouped by values in one column.
It does not work if the view is grouped by values in two columns.
See screenshot below of undesired behaviour:
Steps To Recreate:
Create a Microsoft List, ensure it has the
?env=WebViewListsuffix on the end of the URL so you are viewing the 'Microsoft List' style list.Add some columns and several entries to your list
In List Settings, click on your View name and scroll down to the 'Group By' section
Group by a single column and click Save
On the list frontend, click on the name of the View, then select 'Format Current View'.
Add the styling below and click Save:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"groupProps": {
"headerFormatter": {
"elmType": "div",
"txtContent": "= @group.columnDisplayName +' > ' + @group.fieldData.displayValue",
"style": {
"background-color": "#333",
"color": "#fff",
"font-weight": "normal",
"width": "100%",
"padding": "10px 20px",
"border-radius": "5px",
"margin-left": "-30px"
}
}
}
}
Reload the list frontend, and you will see the group heading styling has been applied
Go to List Settings, click on your View name and scroll down to the 'Group By' section
Group by two columns and click Save
Reload the list frontend and you will see that the group styling has now only been applied to the first group and the rest of the groups have no styling applied (in my case they are invisible)
Question:
How do I ensure that headerFormatter styling in groupProps is being applied to group headings when a Microsoft List is grouped by more than one column?
It would be preferable if I could style the first and second level grouping separately.
