SharePoint framework (SPFX) Extensions – ListView Command Set

What is Command Set Extension:

There are many default Commands available in a list view like below.

But to achieve some business requirements we might need new custom commands, so Microsoft gives us an option to create our own extension called “Command Set” or “ListView Command Set”. We will see how to create them in this blog.

Step 1: Create a SPFX list view command set extension

Its same as we did for SPFX application customizer and only difference is we need to select “ListView Command Set” in type of extension

Step 2: Project code files

I will open with my usual Visual Studio Code “Code .”

Microsoft has imported the required libraries at the top of the main typescript file. The important base class needed for ListView command is imported from “@microsoft/sp-listview-extensibility”

The project structure as same as for other extensions with some few differences, I could see the default “.scss” style file is missing maybe because we will use the default style of ListView placeholder. Will go with what Microsoft gives by default.

  • onInit() : method initialises the command set if we need any parameters initialised it can be done here, code will move to next method only if this onInit is done.
  • onListViewUdpated() : method is called after the onInit(). This is the portion which controls the command rendering part. In this tutorial we could see one command set available always on the list view command bar. Another command it will be available only when an item is selected in the list
  • onExecute() : method is the one which triggers when the Command Set actioned(Clicked). Here for now it will open a Dialog message.

You can find the Extension type, id of the extension in the manifest file. Moreover, this is file where we need to define the command set Title, Image for our custom command. The file has default two command sets for us “Command One” and “Command Two”.

Step 3: Debug

Start with “Gulp serve”. It will redirect to our SharePoint site page which we added in the “serve.json” file.

In the above debug page click “Load Debug Scripts” button. It will our Command Set as “Command Two” on the list view top command bar. Great we are now ready to add our own custom triggers using these command sets.

“Command Two” – is visible always on the list view command bar

Using this we can make some bulk actions or do some custom action more than the OOTB command actions.

“Command One” – is visible only when an list item is selected

Fantastic it was so easy to create a custom ListView command set using SPFX extensions. I am so eager an interested as this will solve many of business requirements.

But it didn’t work as expected. The page loaded without the prefix “Value:”. I tried many ways from many expert articles. So finally raised an issue in sp-dev-docs its open for resolution meanwhile one of our mate shared an interesting workaround as below and it worked. Thanks again.

In the redirection debug page URL update this “&loadSPFX=true” to “&loadSpfx=true”

Please refer for more details here sp-dev-docs. For now, let’s continue with the workaround until we get a permanent solution

Thanks Microsoft. Thanks everyone for stopping here to read my blog.

Issue References:

spfx ListViewCommandSet CommandBar does not show up

https://github.com/SharePoint/sp-dev-docs/issues/4338

SPFX Field Customizer Extension not loading

https://github.com/SharePoint/sp-dev-docs/issues/4374

Command Set extension has stooped working on Gulp serve and on package deployment

https://github.com/SharePoint/sp-dev-docs/issues/4219