onListViewUpdated() method not firing for SPFx CommandSets on Modern Page

[yur-st]

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

Windows

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 128.0.6613.113 (Official Build) (64-bit)
• SPFx v1.18.2
• Node.js v18.17.1
• SharePoint tenant with Early releases enabled

Describe the bug / error

I have created a custom command set for a SharePoint list and encountered an issue where the OnListViewUpdated() method does not fire when the list component is placed on a modern SharePoint page and user select/deselect list items.
List is rendered in new modern UI in modern pages on the tenants with early releases. I tried to disable new Modern UI by setting Offline Client Availability - No, but it does not work.

Steps to reproduce

1. Create a custom command set for a SharePoint list.

2. Implement the OnListViewUpdated() method to handle visibility:
   @override public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void { console.log(CustomCommandCommandSet.onListViewUpdated: Selected rows {event.selectedRows.length}`);
   const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
   const compareTwoCommand: Command = this.tryGetCommand('COMMAND_2');

   compareOneCommand.visible = event.selectedRows.length === 1;
   }`

3. Add the list to a modern SharePoint page.

4. Select any item in the list and observe that the OnListViewUpdated() method is not triggered. 'One Command' is still not visible.

Expected behavior

I know, onListViewUpdated() is deprecated, but it still works except in this one case, when you please a custom list on sharepoint modern page. The list renders in new Modern UI and it is not possible to turn it off there.
Will there be any updates or fixes related to the triggering of OnListViewUpdated() in the new modern UI?

[areestlc]

Thanks for doing a write up on this issue, we noticed it causing all of our older SPFx solutions to stop working

Backwards compatibility should be maintained, however the workaround is to setup a function e.g. _onListViewStateChanges(event) and add it to the listViewStateChangedEvent in the overridden onInit() function instead:
this.context.listView.listViewStateChangedEvent.add(this, this._onListViewStateChanged);

This is the modern way of handling list view changes, which is included when an SPFx command set project is initialised

In addition to the issue you've raised, we noticed that 'event.selectedRows' does not seem to be updating as expected either when the change events are fired

Our workaround was to convert all instances of 'event.selectedRows' to use 'this.context.listView.selectedRows' instead which seems more reliable

[yur-st]

Hi @areestlc ,

From this morning, a new modern UI has been applied for all lists in all tenants, not only for tenants with early releases enabled.
event.selectedRows is not working for command bars and onListViewUpdated() is not triggered when an item is selected/deselected on the list view.
I did not see this issue before on list views of the tenants with early release enabled.
We have this urgent issue for a lot of tenants. Is there any workaround to show old modern UI for lists?

Best regards,
Yuriy

[JurajSlavik]

Hi everybody,

not sure if I should add it here, but i didn`t found more closely related bug.

For our customers, here are the symptoms regarding the issue of non-functional SPFx list extensions new modern UI:

• yesterday (and before), some people didnt see list commands. For all of them, Ctrl + F5 helped before today. This doesn`t help no more starting from today

• today (even if the extension was deployed with Location="ClientSideExtension.ListViewCommandSet), some people don`t see commands at all, and some see it only CommandBar area. None can see them in ContextMenu, where they used to be rendered correctly yesterday. But even if some of the people can see the commands in the CommandBar area, the commands are failing (details below for "onExecute")

• _onListViewStateChanged is fired correctly. It gets correct data in args (ListViewStateChangedEventArgs)

• onExecute is fired correctly. The problem is, that the data in event (IListViewCommandSetExecuteEventParameter), specifically
  event.selectedRows has always the value of an empty array ([]), regardles if any rows are selected. Which makes most of the further code failing

For now, to I’m playing with the usage of args.prevState.selectedRows value in onExecute (as a temporarily workaround), which seems to be feasible, but it's hard work... But maybe this can help to anyone...

Additional notes:

• the "workaround" mentioned in older (already closed) issue SPFx CommandSets and FieldCustomizer not working in new view UI #9514 (Disabling "Sync" on your affected lists) is not working for our customers at all.

• there were no changes in our SPFx solution deployed to the customers in last months from

[JurajSlavik]

The workaround for the issue regarding event.selectedRows is described here #9514 (comment)

[SandyLT]

Hi, we have found also since last night that the new modern List UI issue can no longer be resolved by our customers with either a hard refresh or disabling offline availability. We see that our command sets do appear in the overflow menu now (which they had not before), but with large icons. And as mentioned above, in the case where a command should appear upon selecting one or more items, that is not working at all. Pinging @VesaJuvonen and @AJIXuMuK for visibility on this thread, which I feel is a continuation of the closed #9514. This is very urgent, and is affecting our customers' ability to conduct business today.

[reedpamsft]

@SandyLT for clarity, is the issue that you're seeing that the deprecated "onListViewUpdated" event is no longer working, or something else?

[SandyLT]

@reedpamsft Our code is from @yur-st, so it's the same issues he's reporting. In addition to what I wrote previously, we find that customized forms are opening in a full page rather than from the side. All of these behaviors began to appear (such that there's no way to stop it) last night it seems. So I have to assume it's all related. I'm not a developer, but rather I work for an ISV, and several of our tools make use of list command sets. One of the tools (which we have via Skybow, @yur-st I believe) adds commands to the command bar based on selecting one or more list items, and that functionality is completely gone today. I don't know the technicality of Why 🙂

[reedpamsft]

@SandyLT thanks for the clarification. Please note that separately there has been an issue identified when List Sync is enabled for lists, it will cause issues loading command customizers, so if you are seeing different behavior with different users then that is likely the cause there. The solution for now is to turn off Sync for the affected list (which can be done from the homepage of the "Microsoft Lists" app).

[SandyLT]

@reedpamsft List Sync is not enabled for the lists where I am seeing this issue personally. Nor is my test tenant on targeted/early release. We had previously advised our clients to disable that setting, but even that is not helping today, as described by others above.

[svkcode]

@reedpamsft we have been seeing this issue since yesterday when all our lists switched to the modern lists UI. I can confirm that the onListViewUpdated() is not firing and the event.selectedRows is empty. Is there a plan for the modern UI to support the deprecated method? We have several command sets using different spfx versions and some are from before listViewStateChangedEvent became available so it would be some effort to update everything.

[reedpamsft]

@svkcode yes, we're looking into it.

[AJIXuMuK]

Hey @SandyLT - when you're saying "customized forms" do you mean with Power Apps?

[silentmark]

@areestlc maybe it's not best place to ask, but I'm lost. I tried your solution. Upgraded SPFx from 1.12 to 14.0 to have access to new listViewStateChangedEvent, but for me, this.context.listView is always undefined. Did anyone have same issue.

[JurajSlavik]

@silentmark: For us, the SPFx version 1.16.1 works fine (this.context.listView.selectedRows is defined in custom list view command set). Not sure with other versions.

[SandyLT]

Hey @SandyLT - when you're saying "customized forms" do you mean with Power Apps?

@AJIXuMuK No, sorry, I should have specified. I meant customized with Lightning Forms, our SPFx app (via Skybow) that allows customers to customize forms on lists. I just noticed that an UNcustomized form now opens in a modal dialog rather than from the side (as of this recent update it seems), so I suspect that's the cause of our forms not opening from the side. This is not related to the item selection issue raised here, but I just added it to my comment since it started occurring at the same time. I'll check to see if there's somewhere else I should post about it.

[AJIXuMuK]

@SandyLT just to provide some clarity - SPFx forms never opened in a side panel (with previous list UI as well). It is unsupported feature.