SPFx 1.14 List View Command Set - UPDATE 31.03.2022
Kinga
Posted on March 31, 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.
💖 💪 🙅 🚩
Kinga
Posted on March 31, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
watercooler Why does a reboot make your PC run SO much faster than running all the cleaning tools you can possibly imagine?
November 30, 2024