Post
Ask Question

SharePoint Framework Extensions - ListView Command Set Overview

Overview

SharePoint Framework (SPFx) Extensions are client-side components which allow extending the SharePoint user experience. Read more about SPFx extensions here.

In this article, we will explore the ListView Command Set of SharePoint extensions.

Brief information about Field Customizer

ListView Command Set allows extending the command surfaces of SharePoint to add new actions. It supports toolbar and context menu.

In the classic SharePoint, we used to add the new actions the to SharePoint list by implementing custom actions. In the modern SharePoint, the ListView Command Set helps to implement these scenarios.

Create SPFx Solution

Open the command prompt. Create a directory for SPFx solution.

  1. md spfx-extensions-listviewcommandset  
Navigate to the above created directory.
  1. cd spfx-extensions-listviewcommandset  
Run Yeoman SharePoint Generator to create the solution.
  1. yo @microsoft/sharepoint  
Yeoman generator will present you with the wizard by asking questions about the solution to be created.

Yeoman generator  
 
Solution Name
Hit enter to have a default name (spfx-extensions-listviewcommandset in this case) or type in any other name for your solution.
Selected choice - Hit enter
 
Target for component
Here we can select the target environment where we are planning to deploy the client webpart i.e. SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).
Selected choice - SharePoint Online only (latest)
 
Place of files
We may choose to use the same folder or create a subfolder for our solution.
Selected choice - Same folder
 
Deployment option
Selecting Y will allow the app to be deployed instantly to all sites and will be accessible everywhere.
Selected choice - N (install on each site explicitly)
 
Type of client-side component to create
We can choose to create client side webpart or an extension.
Selected choice - Extension
 
Type of client-side extension to create
We can choose to create Application customizer, Field customizer, or ListView Command Set.
Selected choice - ListView Command Set
 
Command Set name
Hit enter to select the default name or type in any other name.
Selected choice - ModalDialog
 
Command Set description
Hit enter to select the default description or type in any other value.
Selected choice - Displays modal dialog using listview command set extension
 
Yeoman generator will perform scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.

Once the scaffolding process is completed, lock down the version of project dependencies by running the below command.
  1. npm shrinkwrap  
In the command prompt type below command to open the solution in code editor of your choice.
  1. code .  
Solution Structure

The solution structure is similar to client-side web parts with similar configuration options.

configuration options
 
The file ModalDialogCommandSet.manifest.json inside the folder “\src\extensions\modalDialog\” defines the extension type and unique identifier for the solution. Please note down the id. We will need it later for debugging purposes. 
  1. {  
  2.   "$schema": "https://developer.microsoft.com/json-schemas/spfx/command-set-extension-manifest.schema.json",  
  3.   
  4.   "id": "78c7b88e-c176-4694-b95d-1b371279b6e8",  
  5.   "alias": "ModalDialogCommandSet",  
  6.   "componentType": "Extension",  
  7.   "extensionType": "ListViewCommandSet",  
  8.   
  9.   // The "*" signifies that the version should be taken from the package.json  
  10.   "version": "*",  
  11.   "manifestVersion": 2,  
  12.   
  13.   // If true, the component can only be installed on sites where Custom Script is allowed.  
  14.   // Components that allow authors to embed arbitrary script code should set this to true.  
  15.   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f  
  16.   "requiresCustomScript": false,  
  17.   
  18.   "items": {  
  19.     "COMMAND_1": {  
  20.       "title": { "default": "Command One" },  
  21.       "iconImageUrl": "icons/request.png",  
  22.       "type": "command"  
  23.     },  
  24.     "COMMAND_2": {  
  25.       "title": { "default": "Command Two" },  
  26.       "iconImageUrl": "icons/cancel.png",  
  27.       "type": "command"  
  28.     }  
  29.   }  
  30. }  
Implement Field Customizer

Open ModalDialogCommandSet.ts under “\src\extensions\modalDialog\” folder. The class has the below important methods:
 
onInit() event occurs before the page DOM is ready. It returns a promise to perform asynchronous operations. onListViewUpdated() is not invoked until this promise is resolved.
 
onListViewUpdated() event occurs separately for each command. The default implementation is as below
  1. public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {  
  2.     const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');  
  3.     if (compareOneCommand) {  
  4.       // This command should be hidden unless exactly one row is selected.  
  5.       compareOneCommand.visible = event.selectedRows.length === 1;  
  6.     }  
  7. }  
tryGetCommand helps to get the Command object, which is a representation of the command in UI.
 
onExecute() method defines what happens when a command is executed. The default implementation is as below 
  1. public onExecute(event: IListViewCommandSetExecuteEventParameters): void {  
  2.     switch (event.itemId) {  
  3.       case 'COMMAND_1':  
  4.         Dialog.alert(`${this.properties.sampleTextOne}`);  
  5.         break;  
  6.       case 'COMMAND_2':  
  7.         Dialog.alert(`${this.properties.sampleTextTwo}`);  
  8.         break;  
  9.       default:  
  10.         throw new Error('Unknown command');  
  11.     }  
  12.   }  
Debug Field Customizer

The SharePoint local workbench now cannot be used to test the field customizer as we will need an actual SharePoint site to create needed list and fields.
  1. Open SharePoint site
  2. From site contents create a new list named “Projects”

    Projects

  3. Click “Add column” to add a number field
    Add column

  4. Name it as Completion

    Completion

  5. Click Save
  6. Add some test data to the list
    test data to the list 
Update the Solution for Field changes

Open serve.json file under config folder. Update PageUrl to the URL of the list we created in the previous step.
  1. {  
  2.   "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",  
  3.   "port": 4321,  
  4.   "https": true,  
  5.   "serveConfigurations": {  
  6.     "default": {  
  7.       "pageUrl": "https://contoso.sharepoint.com/sites/ModernCommunicationBlank/Lists/Projects/AllItems.aspx",  
  8.       "customActions": {  
  9.         "78c7b88e-c176-4694-b95d-1b371279b6e8": {  
  10.           "location": "ClientSideExtension.ListViewCommandSet.CommandBar",  
  11.           "properties": {  
  12.             "sampleTextOne": "One item is selected in the list",  
  13.             "sampleTextTwo": "This command is always visible."  
  14.           }  
  15.         }  
  16.       }  
  17.     },  
  18.     "modalDialog": {  
  19.       "pageUrl": "https://contoso.sharepoint.com/sites/ModernCommunicationBlank/Lists/Projects/AllItems.aspx",  
  20.       "customActions": {  
  21.         "78c7b88e-c176-4694-b95d-1b371279b6e8": {  
  22.           "location": "ClientSideExtension.ListViewCommandSet.CommandBar",  
  23.           "properties": {  
  24.             "sampleTextOne": "One item is selected in the list",  
  25.             "sampleTextTwo": "This command is always visible."  
  26.           }  
  27.         }  
  28.       }  
  29.     }  
  30.   }  
  31. }  
In the command prompt, type the below command to run the extension
  1. gulp serve  
Accept loading of debug manifests by clicking “Load debug scripts”

Load debug scripts 
 
The Command Two button should appear in the toolbar.

toolbar 
“Command One” button is not visible until you select any list item

list item
 
Click “Command One” button, it will display an alert,

display an alert
 
Apply List View Command Set Customization

Open ModalDialogCommandSet.ts file from “\src\extensions\modalDialog\” folder

Update onExecute method
  1. public onExecute(event: IListViewCommandSetExecuteEventParameters): void {  
  2.     switch (event.itemId) {  
  3.       case 'COMMAND_1':  
  4.         Dialog.alert(`Clicked ${this.properties.sampleTextOne}`);  
  5.         break;  
  6.       case 'COMMAND_2':  
  7.         Dialog.prompt(`Clicked ${strings.Command2}. Enter something to alert:`).then((value: string) => {  
  8.           Dialog.alert(value);  
  9.         });  
  10.         break;  
  11.       default:  
  12.         throw new Error('Unknown command');  
  13.     }  
  14.  }  
Make sure the gulp serve is running. Refresh the SharePoint list – Projects

SharePoint list Project 
 
The ListView Command Set is now customized to show the prompt.

Summary

ListView Command Set SharePoint Framework extension helps to extend the toolbar of SharePoint list. This is an alternative to custom actions in the modern SharePoint sites.


Similar Articles