SPFx 1.14 List View Command Set - UPDATE 31.03.2022

As of today, the issue #7795 I referenced in my previous post is fixed and the business logic List View Command Set can be "cleaned up".

Using the example from my previous post I can now show/hide buttons, depending on the list context, during onInit:

Show/hide buttons during onInit

CommandSet.ts

const registeredList: string[] = ['Travel requests'];

public onInit(): Promise<void> {

  const setCommandsState = (isVisible:boolean) => {
    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    if (compareOneCommand) {
      //Visible for registered lists, does not depend on selected item
      compareOneCommand.visible = isVisible;
    }

    const compareTwoCommand: Command = 
    this.tryGetCommand('COMMAND_2');
    if (compareTwoCommand) {
      //Visible for registered lists, enabled if 1 item selected, so disable by default
      compareTwoCommand.visible = isVisible;
      compareTwoCommand.disabled = true;
    }
  }

  const getListUrl = (listUrl: string): string => {
    let result = listUrl.match(/Lists\/(?<ListName>.*)/);
    return result.groups["ListName"];
  }

  setCommandsState( registeredList.includes(getListUrl(this.context.listView.list.serverRelativeUrl)));
  return Promise.resolve();
}

command.disabled

Next, I would like to enable my 'COMMAND_2' button only, if exactly one item is selected. This is a job for onListViewUpdatedv2:

CommandSet.ts

public onListViewUpdatedv2(args: ListViewStateChangedEventArgs): void{
  const compareTwoCommand: Command = this.tryGetCommand('COMMAND_2');
  compareTwoCommand.disabled = !(this.context.listView.selectedRows.length == 1);  
  this.raiseOnChange(); //is it needed? seems to have no effect
}

But... it does NOT seem to work: issue #7845. 😦
Will keep you posted.

Comments

[UKurze]

Try this:

public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters) : void {
this.Log('Start onListViewUpdated');

  var selectedRowCount: Number = event.selectedRows.length;

    // commands are enabled only if one item is selected
    var hasSingleSelection: boolean = selectedRowCount == 1;
    this._setCommandEnabled(hasSingleSelection);

}

private _setCommandEnabled(commandId:string, enabled: boolean) : void {
this.Log(Start _setCommandEnabled commandId: ${commandId} enabled: ${enabled});
const command: Command = this.tryGetCommand(commandId);
if (command) {
command.disabled = !enabled;
}
}

[Kinga]

Thank you @ukurze for weighing in :)

I see you are using deprecated onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters), whilst my goal is to make my code working with the new listViewStateChangedEvent.

The issue #7845 already has a fix and is being slowly rolled out. Still doesn't work in my tenant, but any day now, I think =)