List formatting: Group Header calculations and formatting broken in new Lists experience

[z3019494]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

Declarative list formatting

Developer environment

None

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
• SPFx version
• Node.js version
• etc

Describe the bug / error

Also: https://github.com/SharePoint/sp-dev-docs/issues/9756#issuecomment-2275127209

Steps to reproduce

Create view formatting which has some calculations in it.

Example: "groupProps": { "headerFormatter": { "elmType": "div", "style": { "flex-direction": "row" }, "children": [ { "elmType": "div", "attributes": { "class": "=if(indexOf(@group.fieldData,'7MAT') != -1, 'sp-css-backgroundColor-BgCornflowerBlue sp-css-borderColor-CornflowerBlueFont sp-css-color-CornflowerBlueFont', if(indexOf(@group.fieldData,'8MAT') != -1, 'sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-css-color-MintGreenFont',if(indexOf(@group.fieldData,'9MAT') != -1, 'sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-css-color-GoldFont',if(indexOf(@group.fieldData,'10MAT') != -1 || indexOf(@group.fieldData,'10SS') != -1, 'sp-css-backgroundColor-BgCoral sp-css-color-CoralFont',if(indexOf(@group.fieldData,'11MA') != -1, 'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont',if(indexOf(@group.fieldData,'12MA') != -1 || indexOf(@group.fieldData,'MX') != -1,'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont' , 'sp-css-backgroundColor-warningBackground sp-css-color-warningFont'))))))" }, "style": { "display": "inline-flex", "height": "25px", "border-radius": "15px", "padding-left": "8px", "padding-top": "5px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1, 'Group', 'GroupedList')" }, "style": { "padding-right": "6px", "padding-top": "2px", "font-size": "medium" } }, { "elmType": "div", "style": { "display": "inline-flex", "padding-right": "9px" }, "children": [ { "elmType": "div", "txtContent": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1, 'Class: ' + @group.fieldData, 'Topic ' + @group.fieldData + ' | ')", "attributes": { "title": "=@group.fieldData", "class": "ms-fontWeight-bold" }, "style": { "padding-left": "5px" } }, { "elmType": "div", "style": { "padding-left": "5px", "display": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1,'none','')" }, "attributes": { "class": "ms-fontWeight-bold" }, "txtContent": "@group.count" }, { "elmType": "div", "style": { "padding-left": "5px" }, "attributes": { "class": "ms-fontWeight-normal" }, "txtContent": "= if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1 ,'',if(@group.count!= 1,'items','item')" } ] } ] } ] } }

Expected behavior

The "pill" should contain all of the text.

Calculated values in the pill should not be displayed as some float.

See: https://github.com/pnp/List-Formatting/tree/master/view-samples/student-class-learning-tracker

[arkogupta]

@z3019494 thanks for reporting the issue to us! Would it be possible for you to share the list as a template(stp file) so that we can repro the issue internally and see what's going wrong? Or maybe if you have a demo tenant for which you can share the credentials.

[z3019494]

Hi @arkogupta , here's the file :)

https://schoolsnsw-my.sharepoint.com/:u:/g/personal/hubert_lam2_det_nsw_edu_au/ES4kdnvjgQJNgERtU3XImO4BSW3IOpORR-1B9zNrz73E3A?e=XNJSGs

[z3019494]

Hi again @arkogupta

I think I've found a potential source of where the Group Headers go wonky: it seems to occur on lists which have other custom view formatting applied.

• List without custom view formatting, but only group header formatting:

• List with custom view formatting applied and group header formatting:

  

Hope that helps :)

[arkogupta]

Thanks @z3019494. yes that is helpful! Will get back after investigation.

[arkogupta]

@z3019494 I am having some trouble setting up a tenant and uploading your stp file. Would you mind helping by - Creating a new list without the data and using the same schema and using "Export to CSV with schema"

[z3019494]

@z3019494 I am having some trouble setting up a tenant and uploading your stp file. Would you mind helping by - Creating a new list without the data and using the same schema and using "Export to CSV with schema"

Hi @arkogupta , here it is :)

Student and Class Learning Tracker.csv

[arkogupta]

Thanks a lot @z3019494 for sharing the csv. Could you please try using the following for the groupProps section of the formatter - "groupProps": { "headerFormatter": { "elmType": "div", "style": { "flex-direction": "row", "min-width": "max-content" }, "children": [ { "elmType": "div", "attributes": { "class": "=if(indexOf(@group.fieldData,'7MAT') != -1, 'sp-css-backgroundColor-BgCornflowerBlue sp-css-borderColor-CornflowerBlueFont sp-css-color-CornflowerBlueFont', if(indexOf(@group.fieldData,'8MAT') != -1, 'sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-css-color-MintGreenFont',if(indexOf(@group.fieldData,'9MAT') != -1, 'sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-css-color-GoldFont',if(indexOf(@group.fieldData,'10MAT') != -1 || indexOf(@group.fieldData,'10SS') != -1, 'sp-css-backgroundColor-BgCoral sp-css-color-CoralFont',if(indexOf(@group.fieldData,'11MA') != -1, 'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont',if(indexOf(@group.fieldData,'12MA') != -1 || indexOf(@group.fieldData,'MX') != -1,'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont' , 'sp-css-backgroundColor-warningBackground sp-css-color-warningFont'))))))" }, "style": { "display": "inline-flex", "height": "25px", "border-radius": "15px", "padding-left": "8px", "padding-top": "5px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1, 'Group', 'GroupedList')" }, "style": { "padding-right": "6px", "padding-top": "2px", "font-size": "medium" } }, { "elmType": "div", "style": { "display": "inline-flex", "padding-right": "9px" }, "children": [ { "elmType": "div", "txtContent": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1, 'Class: ' + @group.fieldData, 'Topic ' + @group.fieldData + ' | ')", "attributes": { "title": "=@group.fieldData", "class": "ms-fontWeight-bold" }, "style": { "padding-left": "5px" } }, { "elmType": "div", "style": { "padding-left": "5px", "display": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1,'none','')" }, "attributes": { "class": "ms-fontWeight-bold" }, "txtContent": "@group.count" }, { "elmType": "div", "style": { "padding-left": "5px" }, "attributes": { "class": "ms-fontWeight-normal" }, "txtContent": "= if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1 ,'',if(@group.count!= 1,'items','item')" } ] } ] } ] } }

I just added "min-width": "max-content" to the root style of the group header. Let me know if that fixes the issue. While I'll work on a fix so that you don't have to add that in the future, but that should help for the time being. Also please let me know what other issues you are seeing.

[z3019494]

Thanks a lot @z3019494 for sharing the csv. Could you please try using the following for the groupProps section of the formatter - "groupProps": { "headerFormatter": { "elmType": "div", "style": { "flex-direction": "row", "min-width": "max-content" }, "children": [ { "elmType": "div", "attributes": { "class": "=if(indexOf(@group.fieldData,'7MAT') != -1, 'sp-css-backgroundColor-BgCornflowerBlue sp-css-borderColor-CornflowerBlueFont sp-css-color-CornflowerBlueFont', if(indexOf(@group.fieldData,'8MAT') != -1, 'sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-css-color-MintGreenFont',if(indexOf(@group.fieldData,'9MAT') != -1, 'sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-css-color-GoldFont',if(indexOf(@group.fieldData,'10MAT') != -1 || indexOf(@group.fieldData,'10SS') != -1, 'sp-css-backgroundColor-BgCoral sp-css-color-CoralFont',if(indexOf(@group.fieldData,'11MA') != -1, 'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont',if(indexOf(@group.fieldData,'12MA') != -1 || indexOf(@group.fieldData,'MX') != -1,'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont' , 'sp-css-backgroundColor-warningBackground sp-css-color-warningFont'))))))" }, "style": { "display": "inline-flex", "height": "25px", "border-radius": "15px", "padding-left": "8px", "padding-top": "5px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1, 'Group', 'GroupedList')" }, "style": { "padding-right": "6px", "padding-top": "2px", "font-size": "medium" } }, { "elmType": "div", "style": { "display": "inline-flex", "padding-right": "9px" }, "children": [ { "elmType": "div", "txtContent": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1, 'Class: ' + @group.fieldData, 'Topic ' + @group.fieldData + ' | ')", "attributes": { "title": "=@group.fieldData", "class": "ms-fontWeight-bold" }, "style": { "padding-left": "5px" } }, { "elmType": "div", "style": { "padding-left": "5px", "display": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1,'none','')" }, "attributes": { "class": "ms-fontWeight-bold" }, "txtContent": "@group.count" }, { "elmType": "div", "style": { "padding-left": "5px" }, "attributes": { "class": "ms-fontWeight-normal" }, "txtContent": "= if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1 ,'',if(@group.count!= 1,'items','item')" } ] } ] } ] } }

I just added "min-width": "max-content" to the root style of the group header. Let me know if that fixes the issue. While I'll work on a fix so that you don't have to add that in the future, but that should help for the time being. Also please let me know what other issues you are seeing.

Oh yay that's worked!

Unfortunately, the topic number (e.g. the 14 in Topic 14 is still somehow being formatted as a float instead of an integer. The Topic Number field is a Number column with 0 decimal places.

A quick fix seems to be surrounding the @group.fieldData with the toString function:

[arkogupta]

Hmm that is strange. Because I don't see them as floats. Anyway, hoping that toString() works well for you for now.

[z3019494]

Unfortunately the stuff on the right most of the yellow coloured "cards" are also shifted up for no apparent reason:

The relevant bits of view formatting JSON code is from Line 19 onwards. It seems that every single yellow card's Content Rating/Time Allowed/Resources have just floated to the top of the screen for every subsequent yellow card.

[z3019494]

Unfortunately the stuff on the right most of the yellow coloured "cards" are also shifted up for no apparent reason:

The relevant bits of view formatting JSON code is from Line 19 onwards. It seems that every single yellow card's Content Rating/Time Allowed/Resources have just floated to the top of the screen for every subsequent yellow card.

The offending lines seem to be:

          "top": "15px",
          "right": "300px",

Removing these seem to place the star ratings div back to each card:

Removing the "top": "15px" line allows it to be restored somewhat, but not top aligned to the card.

[z3019494]

This is what it's meant to look like:

[arkogupta]

What are the repro steps because I can't seem to even see those sections in my case -

[arkogupta]

Oh looks like they appear only after "marking them as complete" ?

[z3019494]

Oh looks like they appear only after "marking them as complete" ?

Hmm. If the default setting in the view is to have the groups expanded (e.g. use the Assigned to me view), then the floats don't appear.

If the default setting in the view is to have the groups NOT expanded, (e.g. use the Assigned to me (Also show completed) view), then the floats do appear, even after the toString function is applied.

The setting involved in the Edit View screen:

[arkogupta]

@z3019494 I think I figured out the float issue. I'll try to merge the fix ASAP. Thanks for your help!