SharePoint Framework (SPFx) are simply put a framework that allows us to create client side extensions for Microsoft SharePoint and Microsoft Teams.

One of the extensions we can make is the ListView Command Set extension, which interacts with items selected in a list. For example, we can create an extension that adds a command to the context menu of an item. What this command does, is completely up to you.

In this post I’ll share some notes on how to do a conditional rendering of the different commands. The getting started guide touches briefly on the topic where it show how the commands are hidden if more than one item is selected. In my case however, I needed a bit more control.

• Requirement 1: Commands shall not be visible if the selected item is a folder
• Requirement 2: Only command one shall be visible if the selected item are missing information in a metadata field.
• Requirement 3: Only command two and three shall be visible if the selected item have a information in the metadata field.

Lets jump straight to the solution, and then I’ll try to add some more explanation below.https://medium.com/media/e99a776f0f22e7cfd039b749d5fb3695

My logic here

1. Hide all the commands first (line 8–10)
2. If only one item is selected (line 15)
3. Add the selected row to a selectedRow variable (line 17)
4. If the selected items ListField is empty, show commandOne (line 20)
5. If the selected items ListField is not empty, show commandTwo and commandThree (line 25)
6. If the selected items ContentType is a folder, hide all commands (line 31)

Finding what list fields that are available for filtering

No all fields in a list if easily visible from the SharePoint web page. The trick here is to call one a API operation that will list all the fields available. In the URL below, replace {tenant}with the name of your SharePoint Only tenant name, {siteName}with the site that you are targeting and {listId}with the ID for the list that are going to be used with the extension.

@override
public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
  const commandOne: Command = this.tryGetCommand('COMMAND_ONE');
  const commandTwo: Command = this.tryGetCommand('COMMAND_TWO);
  const commandThree: Command = this.tryGetCommand('COMMAND_THREE');

  // Hide commands by default
  commandOne.visible = false;
  commandTwo.visible = false;
  commandThree.visible = false;
  
  // See https://{tenant}.sharepoint.com/sites/{siteName}/_api/web/lists(guid'{listId}')/Fields
  // for list of fields that can be used for filtering

  if (event.selectedRows.length === 1) {

    const selectedRow = event.selectedRows[0];

    // Command One should only be visible if ListField is empty
    if (selectedRow.getValueByName("ListField") === "") {
      commandOne.visible = true;
    }

    // Command Two and Command Three should visible if ListField have a value
    if (selectedRow.getValueByName("ListField") !== "") {
      commandTwo.visible = true;
      commandThree.visible = true;
    }

    // Hide all commands if the item is a folder
    if (selectedRow.getValueByName("ContentType") === "Folder") {
      commandOne.visible = false;
      commandTwo.visible = false;
      commandThree.visible = false;
    }
  }
}

This will return an XML document with all the fields we can use for filtering, and from there it’s just to add some logic

A final lesson learned

The onListViewUpdated method is super sensitive. If you do anything inside there that either breaks or output anything (even the console), the extension simply will not work. So calculate in some extra time for troubleshooting your rendering logic. It might become an painful experience.

This blog is part of SharePoint Week. For more great content, click here

About the Author:

Senior Manager in @KPMGNorway leading the Platform Specialists team, and Azure MVP doing public speaking, social media and a blog post now and then

Reference: