How to Add List View command Set To both List And Document Library using SPFX Extension

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:

1. Application level customizer – basically used to render custom component to defined placeholder example Top Navigation, Footer, etc.
2. Fields level customizer – basically used to render the field level modification within views.
3. 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

1. md Extension  

Step 2

Navigate to the created directory.

Step 3

Run the  yeoman command,

1. 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.

1. 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.

NoteIf 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 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.

NoteWait 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.