An Interest In:
Web News this Week
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
March 31, 2022 08:53 am GMT
Original Link: https://dev.to/kkazala/spfx-114-list-view-command-set-update-31032022-gl1
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.
Original Link: https://dev.to/kkazala/spfx-114-list-view-command-set-update-31032022-gl1
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To