DEV Community

Kinga
Kinga

Posted on • Edited on

3 2

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();
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (2)

Collapse
 
ukurze profile image
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);
Enter fullscreen mode Exit fullscreen mode

}

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;
}
}

Collapse
 
kkazala profile image
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 =)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay