SharePoint Framework (SPFX) Extension - Add ListView command Set To List And Document Library

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

There are three types of SharePoint framework extensions:

Application level customizer – basically used to render custom component to defined placeholder example Top Navigation, Footer, etc.
Fields level customizer – basically used to render the field level modification within views.
List View Command Set – basically used to render a new action at the list view level.

In this article, we are going to discuss how to enable List view command set to Generic List and Document library level.

Let’s get started.

Step 1 - Generate SharePoint Framework Extension

Open the command prompt and create a blank folder

md Extension

Step 2

Navigate to the created directory.

cd Extension

Step 3

Run the yeoman command,

yo@microsoft/sharepoint

Enter the name of Solution: Metadata
Select “SharePoint Online” baseline package you want to target for your component(s).
Select “Use the current folder” place the files.
Select “Extensions” to the type of client-side component.
Select “ListView Command Set” as a type of client-side extension
Enter command Set name: Metadata

Yeomen will take a couple of minutes to install required dependencies and scaffolding the SPFX project. Finally, you will get the below “congratulations “ message.

Step 4

Navigate to Visual Studio Code to open the solution.

Type Code .

It will open the project into an open source IDE, i.e., Visual Studio Code (condition - Visual Studio Code needs to be installed). Navigate to SharePoint Folder Structure -> assets -> element.xml.

Custom Action tag has Registration Id of 100 which means it's associated with Generic List. We need to change the Registration Id from 100 to 101 which means it will associate the SPFX extension component to Generic Library.

Note
If you want to use the same custom SPFX extension to both list and library, copy and paste the same custom action and section one RegistrationId assign to 101.

Step 5

Open Integrated Terminal to build sppkg package using gulp command,

Step 6 - Run Gulp Build

It will build a solution and create two new folders - Lib and Temp

Step 7 - Run Gulp Bundle –ship

It will bundle all JS and CSS files and make it ready to bundle files in CDN. It creates a dist folder.

Step 7 - Run Gulp Package-solution –ship

It will create a production ready .sppkg file.

Step 8 - Package Deployment at Site Collection Level

The package can be deployed at Tenant Level App Catalog or Site collection level App Catalog. It really depends on the project scenario and governance policies to the usage of the designed app which is the preferred option. Let's proceed with site collection level app catalog.

Navigate to Modern site collection.

Go to Site Content -> App for SharePoint -> Upload the .SPPKG file.

Click to deploy the solution.

Step 9

Navigate to Site Content.

Click New -> Add APP.

Step 10

Add Apps to Site Collection Level.

Note
Wait for a couple of seconds to activate the solution.

Step 11

Browse any generic template created list and select item, you will find Command One and Command Two at the top of list view. Click on the command One text, it will prompt a custom message given in SPFX Extension solution.

Step 12

Browse any generic template created Library and select item, you will find Command One and Command Two at the top of list view. Click on the command One text, it will prompt a custom message given in SPFX Extension solution.

Hope you have learned something new in this article. Stay tuned for more related articles to get more insights and learning.

4 Comments

Join the conversation! Your thoughts help the community grow.

Amul Kumar6y ago
Hi, Is there a way we can update metadata for Library in SPFX extension?
Subrat6y ago
Hi , how to add the command bad after the Flow ? my new button its coming after Export to excel button. Any help ?
Yogesh Jagtap7y ago
How I can add multilevel Commands like : Command One have multiple child commands?
- Manoj Mittal7y ago
  I don;t think so, multilevel is available but you can use multiple command set. We can define condition for hide and show.