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 onListViewUpdated 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** onListViewUpdated** method.
Here is the result output of this code. First, you do not see any of the command actions:
Once you selected an item, both will be visible:
Once you select one more item, only the second one will be displayed:
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:
Updates
31/01/2018
Since the initial release of the extensions and the GA version, a couple of things have changed. The article has now been updated with the new API methods and interfaces.