List Formatting: Group header cannot be clicked even when setting `defaultClick` to `headerFormatter` in `groupProps` in the newer? Microsoft Lists

[tecchan1107]

Target SharePoint environment

SharePoint Online

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

Declarative list formatting

Developer environment

Windows

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

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

Additional environment details

No response

Describe the bug / error

In the newer? Microsoft Lists, I cannot click on the group header even though I set defaultClick to headerFormatter in groupProps.

In the older? Microsoft Lists, clicking on a group header with defaultClick set would display a view filtered by the value of that group header.

Steps to reproduce

1. Create a list
2. Create a choice column
3. Create some items
4. Grouping by choice column created in 2.
5. Set the following JSON in the view formatting

Sample Code

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "groupProps": { "headerFormatter": { "elmType": "div", "style": { "font-size": "16px", "cursor": "pointer", "padding": "5px 10px", "border-radius": "5px" }, "customRowAction": { "action": "defaultClick" }, "attributes": { "class": "ms-bgColor-themeLighter ms-bgColor-themePrimary--hover ms-fontColor-white--hover" }, "children": [ { "elmType": "span", "txtContent": "@group.fieldData.displayValue" }, { "elmType": "span", "style": { "margin-left": "5px" }, "txtContent": "=' ('+@group.count+')'" } ] } } } ```

Expected behavior

Clicking on a group header with defaultClick set will display a view filtered by the value of the group header, similar to the older Microsoft Lists

[z3019494]

My view formatting has been completely wrecked by the new UI.

Inside the PWA:

[arkogupta]

@tecchan1107 In the newer version after we made a fix, now you don't need to add the "defaultClick" action to be able to trigger the default click. Could you try removing it and clicking on the group header again? The default actions are still passed through even when group header formatter is applied. We are working on a fix to support custom actions on group formatter and will update you soon. Thanks for reporting this!

[influential-eliot]

So ... sorry to ask, but ... does that mean that it should work, or that it shouldn't, @arkogupta ?

@tecchan1107 In the newer version after we made a fix, now you don't need to add the "defaultClick" action to be able to trigger the default click. Could you try removing it and clicking on the group header again? The default actions are still passed through even when group header formatter is applied. We are working on a fix to support custom actions on group formatter and will update you soon. Thanks for reporting this!

[arkogupta]

@influential-eliot As of now, if you remove the part in the JSON which has customRowAction with defaultClick as the action, clicking on the group header should filter the view. Could you please verify that once in your tenant? As for having the same behavior with the customRowAction, that will reach soon so that you don't have to modify your CF JSON.

[tecchan1107]

Thanks for letting me know and for the fix @arkogupta 🙏✨️ Removing defaultClick resulted in a filtered view!

In the above video, I used the following code:

Sample Code

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "groupProps": { "headerFormatter": { "elmType": "div", "style": { "font-size": "16px", "cursor": "pointer", "padding": "5px 10px", "border-radius": "5px" }, "attributes": { "class": "ms-bgColor-themeLighter ms-bgColor-themePrimary--hover ms-fontColor-white--hover" }, "children": [ { "elmType": "span", "txtContent": "@group.fieldData.displayValue" }, { "elmType": "span", "style": { "margin-left": "5px" }, "txtContent": "=' ('+@group.count+')'" } ] } } } ```

May I ask one more thing if possible? Conversely, is it possible to prevent a filtered view from being displayed?

[influential-eliot]

Hi, @arkogupta ... I think as @tecchan1107 is showing ... that is still not a 'fixed' view.

The intent is simple, tapping 'Choice 1 (3)' in this image should make the results below it 'accordian' up and out of view, but not affect those beneath the 'Choice 2 (3)' and 'Choice 3 (3)' options.

If this is not the case, then I think that my suggestion should be unlinked from this, as this I am purely talking clear and obvious UX/UI functionality that we should be able to (and possibly previously were) affect using the JSON view formatting. You tap the word, it performs the same action as the chevron to the left of it.

[arkogupta]

@tecchan1107 @influential-eliot So in our older version, due to some limitations overriding the group header using custom formatting completely changed its behavior (including its default actions like clicking to filter it), and hence we needed to use the "defaultClick" action to be able to get that behavior back. In the new version, we currently support the defaultClick out of the box even when the group header has been rendered using custom formatter. Wanted this feedback from you as experienced users - Which one of both cases do you think is more intuitive? The older pattern or the new one?(There is one bug which will be fixed soon in which adding the defaultClick action is preventing the actions)

[influential-eliot]

@arkogupta ... unfortunately from this response it's hard to understand right now.

I will have to try it again. I'll come back when I have.

[z3019494]

My view formatting has been completely wrecked by the new UI.

Inside the PWA:

@tecchan1107 - do you think I should raise a new issue for this, or keep it in this issue?

[XueSheng-GIT]

Which one of both cases do you think is more intuitive? The older pattern or the new one?(There is one bug which will be fixed soon in which adding the defaultClick action is preventing the actions)

@arkogupta from a user point of I would expect that the default behaviour of groupProps/headerFormatter is the same as in the regular view (click on a header to filter). An additional customRowAction would make sense to add additional/different behaviour (like the mentioned unfold/collapse).

What's really missing at the moment is the possibility to format the header in case of two grouped columns (which is currently the limit). It should be possible to format the "outter" group (1st level) differently than the "inner" group (2nd level). You can only workaround that by checking for the column name but then you can only use this custom format for a really specific usecase.

It would also be good to have something like isSelected or isCollapsed available to be able to highlight groups you are working in.

Does it make sense to create additional issues regarding the missing features? Or will it be a "not planned" anyways?

[tecchan1107]

@tecchan1107 - do you think I should raise a new issue for this, or keep it in this issue?

@z3019494 I believe your issue is a different problem from this one, so I think it would be better to create a new issue!

[tecchan1107]

Which one of both cases do you think is more intuitive? The older pattern or the new one?(There is one bug which will be fixed soon in which adding the defaultClick action is preventing the actions)

@arkogupta I guess it is a matter of familiarity, but I find the old pattern more intuitive and easier to understand.

Also, I'm curious whether it's necessary to set defaultClick when formatting columns that already have default behaviors, such as the Title column, using a new pattern.

For example, I think if defaultClick is not needed for formatting a group column but is required for the Title column, this inconsistency in specifying default behaviors could cause confusion during coding.

[XueSheng-GIT]

@arkogupta Was there any update in the meantime? Lately filtering items was working as explained by you (https://github.com/SharePoint/sp-dev-docs/issues/9756#issuecomment-2275762001). Since yesterday filtering does not work anymore by clicking on a group header. Adding customRowAction with defaultClick does not seem to work either.

[XueSheng-GIT]

@arkogupta Was there any update in the meantime? Lately filtering items was working as explained by you (#9756 (comment)). Since yesterday filtering does not work anymore by clicking on a group header. Adding customRowAction with defaultClick does not seem to work either.

I double checked again and adding defaultClick seems to work now. Maybe I had a typo when trying yesterday.

Example of initial report

``` { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "groupProps": { "headerFormatter": { "elmType": "div", "style": { "font-size": "16px", "cursor": "pointer", "padding": "5px 10px", "border-radius": "5px" }, "customRowAction": { "action": "defaultClick" }, "attributes": { "class": "ms-bgColor-themeLighter ms-bgColor-themePrimary--hover ms-fontColor-white--hover" }, "children": [ { "elmType": "span", "txtContent": "@group.fieldData.displayValue" }, { "elmType": "span", "style": { "margin-left": "5px" }, "txtContent": "=' ('+@group.count+')'" } ] } } } ```

@arkogupta I would appriciate if you could explain/confirm if this is now the intended behaviour and whether there are alternative options for defaultClick. Thanks a lot for taking care of our issues!

[arkogupta]

Thank you all! @tecchan1107 Could you please mark this as closed now if you feel complete.

[tecchan1107]

I just checked and the filtered view appears when I add a default action as before! Thanks for the notice and the fix @arkogupta !

I will close this issue.