SharePoint Framework (SPFX) Extension - Restrict List View Command Set To Specific List Or Library

Overview

SharePoint Framework extensions extend the user experience toward the Modern Framework List and Library to render custom components.

When we deploy an SPFx extension List View Command set at the site collection level, by default, it’s available to all lists and libraries.

In this article, we are going to learn how to restrict the List View command set to a specific List or Library.

Let’s get started.

Step 1

Create an SPFx OOTB Extension List View Command Set solution using the previous article.

Add List view command set using SharePoint Framework Extension

Type Code .

It will open the project into an open source IDE, i.e., Visual Studio Code (condition - Visual Studio Code needs to installed on your system).

Step 1 - Navigate to the Typecript file

Src -> extrensions -> metatdata -> MetadataCommandSet.ts

 

 

This command makes the command set enabled or disabled on item selection. We can target the same to List and Library to enable and disable List and Library. 

compareOneCommand.visible = event.selectedRows.length === 1;

Step 2 - Modified command

 

 

 

Replaced code base,

public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
    var Libraryurl = this.context.pageContext.list.title;

    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    if (compareOneCommand) {
      // This command should be hidden unless exactly one row is selected.
      compareOneCommand.visible = (event.selectedRows.length === 1 && Libraryurl == "BotFiles" );
    }
  }

Note
In the above code snippet, I have set the Library Url with current page list title, checked the condition if it's equal to the defined list or library, then made command set visible.

Step 3 - Build, Bundle and Package the Solution

Navigate to View -> Integrated Terminal

Run Gulp Build
Run Gulp Bundle –ship
Run Gulp Package-solution –ship

Step 4 - Package Deployment

 

The package can be deployed at Tenant Level App Catalog or Site Collection Level Catalog. It really depends on the project scenario and governance policies. No changes are required in the above with either deployment solution.

I prefer to deploy at the site collection for this demo.

Navigate to Modern site collection.

Go to Site Content -> App for SharePoint -> Upload the .SPPKG file and click to deploy the solution.

If the same package already exists, don’t forget to check in the package otherwise  it will not be available to other audiences.

 

 

OutPut

Navigate to Library; i.e. Targeted template.

Select the item in the library. Command Set will appear, as it is targeted to the library named "BotFiles".

 

 

 

Navigate to a different library and select the item. Command Set didn't appear, as it is mapped to the library named "BotFiles". 

 

 

I hope you have learned something new in this article. Stay tuned with related articles to get more insights and learning.