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
Step 2
Navigate to the created directory.
Run the yeoman command,
- 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.
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.
Open Integrated Terminal to build sppkg package using gulp command,
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.
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.