Using web part top actions

Git branch

This section uses the https://github.com/PacktPublishing/Mastering-SharePoint-Development-with-the-SharePoint-Framework-/tree/chapter5/webpart-top-actions Git branch from the repository.

Like the property pane, top actions can be used to quickly configure web part settings. However, unlike the former, they do not need to implement a specific control or open the property pane. Also, they are only displayed in edit mode in the web part command bar menu.

Defining top actions

In the solution we are creating, the customer wants to quickly change the number of products displayed in the catalog. This is a perfect use case for a web part top action.

We first define a new web part property called itemsCount that will be used to determine the number of products to display in the UI:

export interface IPacktProductCatalogWebPartProps {
  productsListName: string;
  itemsCount: number;
}

Top action definitions are handled...