The new Microsoft Lists layout on SharePoint lists breaks ListView Command Sets, selectedRows is empty.

[martinlingstuyl]

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.2739.42
• SPFx version 1.19
• Node.js version 18.18

Describe the bug / error

I have build several ListView Command Set that interact with selected items on a list. Recently, the new Microsoft Lists design appears to be rolling out on SharePoint lists. After this change, some of our Command Sets stopped working. When I tried it out in development it turns out that event.selectedRows is an empty array, so if you have a ListView Command Set that uses selected items, they no longer work.

I'm talking about the new list experience in SharePoint. The following is no longer working: selecting an item and triggering a Command Set on that item:

This is that part of (boilerplate code) that stopped working:

// event.selectedRows is now an empty array, 
public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    const listItemId = event.selectedRows[0].getValueByName("ID")
    switch (event.itemId) {
      case 'SOME_COMMAND':
        this.doSomething(listItemId).catch(console.error);
        break;
      default:
        throw new Error('Unknown command');
    }
  }

There is a workaround

I can work around this by accessing the selectedRows through the context object: this.context.listView.selectedRows

Steps to reproduce

1. Use the getting started guide

2. Update the onExecute method from the code section with the following:

@override
public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
  switch (event.itemId) {
    case 'COMMAND_1':
      Dialog.alert(`Selected ${event.selectedRows.length} items`);
      break;
    default:
      throw new Error('Unknown command');
  }
}

4. Serve the command set... and interact with it. It should now trigger a dialog saying you have selected 0 items.

Expected behavior

I'd expect the selectedRows property to work correctly, as it is part of the IListViewCommandSetExecuteEventParameters interface.

[martinlingstuyl]

Some extra information: The following function has the same issues:

@override
public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
  const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
  if (compareOneCommand) {
    // This command should be hidden unless exactly one row is selected.
    compareOneCommand.visible = event.selectedRows.length === 1;
  }
}