Azure / Office 365 / SharePoint Development / Search

Showing or hiding SharePoint Framework ListView custom actions based on permissions and selected items

on Jul 02, 2017 by Elio Struyf with 4 comments

With the latest release of the SharePoint Framework generator, they introduced extensions. These extensions provide you a way to extend the modern site experience in SharePoint. You can, for example, add your own headers and footers, override how fields are rendered and create some custom list actions.

In this article, I will focus on how you can use the ListView Command Set extension to create your own custom list actions that are shown based on permissions and selected list items.

Info: If you never tried out the ListView Command Set extensions, I recommend you to read the following article: Build your first ListView Command Set extension.

Show and hide commands based on users its permissions

If you followed the documentation article to create your first ListView Command Set, you created two custom commands which trigger an alert once invoked. One thing you might want to add is the ability to view or hide the custom commands if the user has certain permissions in the list.

For example: hide a delete command if the user has only read permissions to the library. Luckily the implementation for this is not that hard to achieve.

First, you can check if the user has specific list permissions via the hasPermissions method this.context.pageContext.list.permissions.hasPermission() and pass in the required permission.

Once you know if the user has the right permissions, you can implement the code to hide or show the action in the onRefreshCommand method. Here is some sample code:

Show or hide actions when items are selected

Another common thing which you might want to achieve is to show or hide actions when item(s) are selected in the list. This can be achieved by checking the event.selectedRows object in the onRefreshCommand method.

Here is the result output of this code. First, you do not see any of the command actions:

Custom actions are not shown

Custom actions are not shown

Once you selected an item, both will be visible:

Actions become available when one item is selected

Actions become available when one item is selected

Once you select one more item, only the second one will be displayed:

Only the multi-select action will be shown when multiple items are selected

Only the multi-select action will be shown when multiple items are selected

Retrieve the selected items information when action is clicked

The same selected rows information can be used for retrieving item information when you clicked on the action. This could be useful if you want to do some updates to the selected items in your code.

Here is some sample code:

Retrieve the selected item column information

Retrieve the selected item column information

Article comments