Skip to content

PropertyFieldRoleDefinitionPicker control

Role Definition picker control allows to select role definitions of a specific web via the property pane.


The control allows a you to pick role definitions from a dropdown control. It supports role definition selection using the dropdown control of Office fabric UI with multi-select enabled. Role Definition Picker overview

PropertyFieldRoleDefinitionPicker example usage

PropertyFieldFilePicker example

How to use this control in your solutions

  • Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency.
  • Import the following modules to your webpart:
import { IBasePermissions, IPropertyFieldRoleDefinitionPickerProps , PropertyFieldRoleDefinitionPicker, RoleTypeKind , IRoleDefinitionInformation  } from "@pnp/spfx-property-controls/lib/PropertyFieldRoleDefinitionPicker";

Create a new property for your web part, for example:

export interface IPropertyControlsTestWebPartProps {
  roleDefinitions: IRoleDefinitionInformation[];
  • Add the role definition picker property control to the groupFields of the web part property pane configuration:
 PropertyFieldRoleDefinitionPicker('roleDefinitions', {
    context: this.context,
    label: "Role Definitions",
    onPropertyChange: this.onPropertyPaneFieldChanged,
    key: "roleDefinitionPickerId",
    selectedRoleDefinition:["Full Control"],
    roleDefinitionsToExclude: ["System.LimitedView"],


The PropertyFieldRoleDefinitionPicker control can be configured with the following properties:

Property Type Required Description
properties any yes Parent web part properties, this object is used to update the property value.
key string yes A unique key that indicates the identity of this control.
context BaseComponentContext yes Current webpart context.
onPropertyChange function yes Defines a onPropertyChange function to raise when the data gets changed.
label string no Specifies the text describing the role definition picker.
webAbsoluteUrl string no Absolute Web Url of target site (user requires permissions)
required boolean no Sets the label to inform that the value is required.
disabled boolean no Specifies if the picker button is disabled
roleDefinitions IRoleDefinitionInformation[] yes The value of selected role defintions
multiSelect boolean no Specify if you want to have a single or multi-select role definition picker. By default this is set to true (multi-select role picker).
selectedRoleDefinition string[] no Pre-selected role definitions for the picker control
roleDefinitionsToExclude string[] no Role definitions to be excluded from the picker control
onRoleDefinitionsRetrieved (roleDefinitions: IRoleDefinitionInformation[]) => PromiseLike<IRoleDefinitionInformation[]> | IRoleDefinitionInformation[] no Callback that is called before the dropdown is populated.
onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it.

interface IRoleDefinitionInformation

The value returned from the selected role definition.

Value Type Description
Id number Id of the role definition.
Name string Name of the selected role definition.
Description string Description of selected role definition.
Hidden boolean Whether selected role definition is hidden or not.
Order number Order of selected role definition.
RoleTypeKind RoleTypeKind RoleTypeKind of selected role definition.
BasePermissions IBasePermissions BasePermissions of selected role definition.

interface IBasePermissions

Value Type
Low number
High number

type RoleTypeKind

Value Type
RoleTypeKind 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7