Create and deploy SharePoint Framework (SPFx) listview command set extension

by

In this SPFx tutorial, we will discuss how to create and deploy SharePoint Framework (SPFx) listview command set extension.

By using command set extensions, we can add new custom actions into to SharePoint online list or library command bar.  And we can get client-side code to implement the behavior of the custom actions.

Subscribe to Our YouTube Channel for more videos

This will be a step-by-step tutorial on the SPFx ListView command set.

If you are new to SPFX development check out the below tutorials:

Create SharePoint framework listview command set extension

Now we will see step by step how we can create our first SharePoint Framework list view command set extensions.

Open the node.js command prompt and run the below command.

md CommandSetDemo
cd CommandSetDemo

Now Yeoman SharePoint generator.

Yo @microsoft/sharepoint

Then you can select the options like below:

  • What is your solution name?
  • Then select SharePoint Online only (latest) for the baseline packages.
  • Where you want to place the files? Select Use the current folder
  • Then Select N, to allow the solution to be deployed to all sites immediately.
  • Select N, select solution contains unique permissions.
  • Then select Extension, which type of client-side component to create?
  • Then which type of client-side extension to create? Select ListView Command Sets from (Application Customizer/Field Customizer/ListViw Command Sets)
SPFx listview command set extension

Then you can provide the ListView Command Set name and description like below:

SPFx listview command set

Then it will take some time to create the solution for us and displays a successful message like the below:

SPFx listview command set example

Run the below command to open the solution using visual studio code.

code .

The project structure looks like the below:

sharepoint framework listview command set extension

Here now we will discuss a couple of important files in our solution.

CommandSetDemoCommandSet.manifest.json

This file contains the id of your listview command set extensions and type of extension.

Apart from that this file also contains the buttons that you are going to add into the list view command bar on the list view.

In this example there are two buttons by default available: Command one and command two.

CommandSetDemoCommandSet.ts

This is another important file where we are going to implement or write our code for this is spfx extension.

Here, by default, it imports BaseListViewCommandSet which is required to work with the SPFX listview command set.

In this file, there are two methods that are very important to understand, because these are the methods, where we are going to add our business logic.

  • onListViewUpdated(): Whenever a change happens to the SharePoint Online list view,  this event triggers separately for each command and the UI  re-rendered. The event function parameter will have the information about which command being rendered. Based on that you can implement your logic like you can show a button whenever a certain number of items are selected in the list view. You can use the tryGetCommand to get the command button and implement the logic.
  • OnExecute(): In the OnExecute() method, we write the code, what will happen when the command is executed or the item is selected from the menu. This method contains the logic of what you want to do on the command button click.

By default according to the logic, one button will be visible and if you select multiple items then another button will also be visible. And whenever you click on the button it will display a dialogue box with some message.

Now we will see how we can run and test the SPFx listview command extension locally.

We cannot test SPFx extensions in the local workbench, we have to run in a live SharePoint site.

For this, we need to modify in the server.JSON file which is presented under the config folder.

 open the file and add a SharePoint Online list URL like below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://tsinfo.sharepoint.com/sites/SPFxTraining/Lists/Trainers/AllItems.aspx",
      "customActions": {
        "b2a0f600-147a-4bab-8863-05f6da846783": {
          "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
          "properties": {
            "sampleTextOne": "One item is selected in the list",
            "sampleTextTwo": "This command is always visible."
          }
        }
      }
    },
    "commandSetDemo": {
      "pageUrl": "https://tsinfo.sharepoint.com/sites/SPFxTraining/Lists/Trainers/AllItems.aspx",
      "customActions": {
        "b2a0f600-147a-4bab-8863-05f6da846783": {
          "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
          "properties": {
            "sampleTextOne": "One item is selected in the list",
            "sampleTextTwo": "This command is always visible."
          }
        }
      }
    }
  }
}

Now run the below command.

gulp serve

This will open the SharePoint Online site in the local workbench. Click on Load debug scripts.

spfx listview command set extension

Now, you can see in the SharePoint List command bar, one button is visible like below:

sharepoint framework list view command set

If I will select one item from the SharePoint list, I can see the other button also visible in the list command bar.

how to build sharepoint framework list view command set

If you will click on the button, you can see a message like below:

how to develop sharepoint framework list view command set

Deploy SPFx Listview Command Set to SharePoint Online

Now, we will see how to deploy the SharePoint framework list view command set to SharePoint Online Office 365.

Here, is another important file that tells where the listview command set extension will appear.

Open the Elements.xml file which is presented in the SharePoint\assets location and it looks like the below:

Here, RegistrationId=100 defines that it will appear in a custom list.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="CommandSetDemo"
        RegistrationId="100"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="b2a0f600-147a-4bab-8863-05f6da846783"
        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>

If you have not created an app catalog site, then you can create an app catalog site in SharePoint Online.

Now, run the below command to bundle and packages the solution (One by One in the same order).

gulp build
gulp bundle --ship
gulp package-solution --ship

Then it will generate the .sppkg file which we need to upload to the App Catalog site.

how to create sharepoint framework list view command set

Open the folder, drag and drop the .sppkg file into the App catalog site (Apps for SharePoint).

Click on Deploy.

how to build spfx listview command set extension

You can see that it is deployed successfully.

deploy spfx listview command set extension

Now you can open the SharePoint Online site, from gear icon, click on Add an app.

Then you can select the App like below:

deploy sharepoint framework list view command set

After some time, you can see the solution will be added to the site and it appears on the site contents page.

Now, you can open the SharePoint online list and you will be able to see the button in the command bar.

how to create spfx listview command set extension

You may like the following SPFx tutorials:

In this tutorial, we learned, how to create SharePoint Framework (SPFx) listview command set extension and how to deploy spfx listview command set extension to SharePoint Online Office 365.

>