Restrict SPFx List View Command Set Extension to Specific List/Library

A few days before, I built a SharePoint Framework (SPFx) List view command set extension for the SharePoint document library named expense reports, so here I need to create a review files command, so once it is clicked, the file needs to be reviewed, which means it will update the Review and Reviewer fields.

Now, this list view command set extension is designed to work exclusively with the expense report SharePoint library, which contains the specific columns. However, deploying this extension will make it visible in all lists and libraries, which could be an issue. So here I was required to restrict to a particular library.

In this article, I will explain how to restrict the SPFx list view command set extension to a specific list/library.

SPFx Extensions ListView Command Set to Specific List/ Library

In the SharePoint Framework, the list view command set extension is one of the four different extensions. This extension is used to customize the command bar or context menu in SharePoint lists and libraries with custom commands.

Now, the highlighted part in the image below indicates the command bar in the SharePoint list and library.

And this highlighted part indicates the context menu.

In those two places, we can add our custom commands and perform actions with them. Now, let’s start by creating the list view command set extension.

1. Create a new directory in your specified location by running the command below in the command prompt.

md SPFxListViewCmdSet

2. Now, enter this directory by running the command below.

cd SPFxListViewCmdSet

3. Then, to create a project structure for the list view command set extension, run the command below.

yo @micorosft/sharepoint

4. Then it will ask you the following questions, provide the answers as I gave.

• What is your solution name? SPFxListViewCmdSet
• Which type of client-side component to create? Extension
• Which type of client-side extension to create? ListView Command Set
• Add new Command Set to the solution sp-fx-list-view-cmd-set.
• What is your Command Set name? ReviewFilesExt

5. Once it creates the extension, run the command below to open Visual Studio Code.

code .

6. So, here you can see the folder structure of the list view command set extension, which is almost similar to a webpart. The files marked below play a significant role, so let’s discuss each one at a time.

7. The ClientSideInstance.xml file and the elements.xml files are useful while deploying, registering the extension to the SharePoint list/library, and testing the solution.
   This is the code present in the elements.xml file.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="ReviewFilesExt"
        RegistrationId="100"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="2e2f63b5-3bd6-4a88-8d08-b8dcbe35050a"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>
</Elements>

Which contains a custom action that has the following values:

• Title = Extension title.
• RegistrationId = Indicates the list IDs, 100 for the list and 101 for the library.
• RegistrationType = Either list or library.
• Location = Where to register the extension, either in the command bar, the context menu, or both.
• ClientSideComponentId = A unique ID is generated for the list view command set extension, which is also present in the manifest.json file.
• ClientSideComponentProperties = For specific configurations, we can use these properties.

While testing locally, this extension will work for both lists and libraries. Once it is deployed, it will only work for lists because we haven’t provided another custom action for libraries. To make this extension work for the library, add a new custom action with RegistrationId 101 as shown below.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="ReviewFilesExt"
        RegistrationId="100"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="2e2f63b5-3bd6-4a88-8d08-b8dcbe35050a"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>
    <CustomAction
        Title="ReviewFilesExt"
        RegistrationId="101"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="2e2f63b5-3bd6-4a88-8d08-b8dcbe35050a"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>
</Elements>

We can use the ClientSideInstance.xml file to deploy our extension across all sites in our tenant automatically.

8. Then, coming to the .ts file present within the src/extension folder. This is the file where we need to implement our logic. It mainly contains the following three functions:
   • onInit()
   • onExecute()
   • _onListViewStateChanged()

Let’s understand what each function is doing:

• In the onInit() method, using the tryGetCommand() method, one command [COMMAND_1] is created and that is stored in the compareOneCommand variable.