Post
Ask Question

How to Create a ListView Command Set Extension

A ListView Command Set extension in SharePoint allows you to customize the command bar (toolbar) of lists or libraries by adding new actions. These actions can be tailored to perform custom business logic, navigate users to specific locations, or integrate with external systems.

Key features of a ListView Command Set

  1. Custom Commands
    • Add new buttons to the command bar or context menu in list/library views.
    • Define actions triggered by these commands.
  2. Context-Sensitive Actions: Execute different logic based on the selected item(s) or list context.
  3. Integration: Connect with third-party APIs, open dialogs, or launch forms.

Steps to Create a ListView Command Set

Step 1. Generate the SPFx Extension.

yo @microsoft/sharepoint

Step 2. When prompted, enter the following values.

  • What is your solution name?: command-extension
  • Which type of client-side component to create?: Extension
  • Which type of client-side extension to create?: ListView Command Set
  • What is your Command Set name?: HelloWorld

Step 3. Open the file ./src/extensions/helloWorld/HelloWorldCommandSet.ts.

Modify the onExecute method to define the action triggered by your custom command.

public onExecute(event: Command): void {
    switch (event.itemId) {
      case 'COMMAND_1':
        alert('Command 1 executed!'); // Replace with your logic
        break;
      case 'COMMAND_2':
        const selectedItems = this.context.listView.listViewItems;
        if (selectedItems.length > 0) {
          alert(`Selected item(s): ${selectedItems.map(item => item.getValueByName('Title')).join(', ')}`);
        } else {
          alert('No items selected.');
        }
        break;
      default:
        throw new Error('Unknown command');
    }
}

Step 4. Update the Manifest.

Open the ./src/extensions/helloWorld/HelloWorldCommandSet.manifest.json file.

This file defines your extension type and a unique identifier id for your extension. You need this unique identifier later when debugging and deploying your extension to SharePoint.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-extension-manifest.schema.json",
  "id": "your-extension-guid",
  "componentType": "Extension",
  "extensionType": "ListViewCommandSet",
  "version": "1.0.0.0",
  "manifestVersion": 2,
  "items": {
    "COMMAND_1": {
      "title": "Alert",
      "iconImageUrl": "https://cdn-icons-png.flaticon.com/512/1828/1828884.png",
      "type": "command"
    },
    "COMMAND_2": {
      "title": "Show Selected Items",
      "iconImageUrl": "https://cdn-icons-png.flaticon.com/512/126/126483.png",
      "type": "command"
    }
  }
}

Step 5. Open ./config/serve.json file. Update the page URL attributes to match the URL of the list where you want to test the solution.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://<YourTenantName>.sharepoint.com/sites/<YourSiteName>/Lists/<YourListName>/AllItems.aspx",
      "customActions": {
        "bf232d1d-279c-465e-a6e4-359cb4957377": {
          "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
          "properties": {
            "sampleTextOne": "One item is selected in the list",
            "sampleTextTwo": "This command is always visible."
          }
        }
      }
    },
    "helloWorld": {
      "pageUrl": "https://<YourTenantName>.sharepoint.com/sites/<YourSiteName>/Lists/<YourListName>/AllItems.aspx",
      "customActions": {
        "bf232d1d-279c-465e-a6e4-359cb4957377": {
          "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
          "properties": {
            "sampleTextOne": "One item is selected in the list",
            "sampleTextTwo": "This command is always visible."
          }
        }
      }
    }
  }
}

Step 6. Build, Package, and Deploy.

Run the following commands one by one.

gulp build
gulp bundle --ship
gulp package-solution --ship

Step 7. Upload the package.

Upload the .sppkg file from the SharePoint/solution folder to your App Catalog.

Step 8. Navigate to the SharePoint list or library where the extension is applied.

  • Look for the new commands added to the toolbar or context menu.
  • Execute the commands and verify their functionality.

Output

Command 1. When you click on "Alert", a simple alert message appears.

“Command 1 executed!”

Command 2. When you select one or more items in the list and click "Show Selected Items," it displays the titles of the selected items in an alert box.

Conclusion

A ListView Command Set extension is a simple and effective way to add custom actions to SharePoint lists and libraries. It lets you create buttons that perform specific tasks, like automating workflows, showing custom messages, or connecting to other systems.


Similar Articles