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.

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

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

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay