Thursday 11 April 2019

Restrict Permissions on Editing SharePoint SPFx Property Pane Configurations

Let us look, how the SPFx web part property configurations changes can be controlled by user permissions.

Let us assume a scenario, where administrators can only change the SPFx web part property values.

The following steps helps achieving the requirement.
  • The permissions of logged in user details could be identified using the context/page context.
  • While rendering the property pane configurations, the current user permissions could be checked.
  • So the properties could be enabled based on the permissions, i.e., properties will be editable, if user has admin access to the site.

This could be achieved, using the WebpartContext property and SPPermission class.

The object is initialized, using the current user permission details, and then site permission is checked for user.
    let permission = new SPPermission(this.context.pageContext.web.permissions.value);
    let isAdmin = permission.hasPermission(SPPermission.manageWeb);


Once the permission is identified, then property could be enabled/disabled by setting the boolean value identified above (isAdmin).

The snippet below shows how the property has been disabled on SPFx webpart.

The below snapshot shows how description property in a disabled mode.
Disabling property based on user permission
Disabling property based on user permission