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:

enter image description here

Steps To Recreate:

  1. Create a Microsoft List, ensure it has the ?env=WebViewList suffix on the end of the URL so you are viewing the 'Microsoft List' style list.

  2. Add some columns and several entries to your list

  3. In List Settings, click on your View name and scroll down to the 'Group By' section

  4. Group by a single column and click Save

  5. On the list frontend, click on the name of the View, then select 'Format Current View'.

  6. 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"
      }
    }
  }
}
  1. Reload the list frontend, and you will see the group heading styling has been applied

  2. Go to List Settings, click on your View name and scroll down to the 'Group By' section

  3. Group by two columns and click Save

  4. 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.

0

There are 0 best solutions below