charlie.tools
2 min read

Using the PnP reusable property pane controls in SPFx 1.20

The out-of-the-box SPFx property pane only gets you so far. Here is a lean setup for adding a people picker, a collection data control, and a rich text field using the PnP controls library.

Every SPFx web part I ship eventually grows past text fields and toggles, and the default property pane controls run out of runway fast. The PnP reusable property pane controls fill the gap — there is a people picker, a collection data editor, a rich text area, and a dozen others that the built-in controls do not cover.

Add the package to your SPFx project:

Terminal window
npm install @pnp/spfx-property-controls --save

Then drop the controls into getPropertyPaneConfiguration. Here is a minimal people picker wired up to a web part property.

MyWebPart.ts
import { PropertyPanePeoplePicker, PrincipalType } from '@pnp/spfx-property-controls/lib/PropertyPanePeoplePicker';
import type { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';


export interface IMyWebPartProps {
  approvers: { fullName: string; login: string }[];
}


protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: { description: 'Approval routing' },
        groups: [
          {
            groupName: 'Approvers',
            groupFields: [
              PropertyPanePeoplePicker('approvers', {
                label: 'Select approvers',
                initialData: this.properties.approvers ?? [],
                allowDuplicate: false,
                principalType: [PrincipalType.User, PrincipalType.SharePointGroup],
                context: this.context,
                onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
                properties: this.properties,
                onGetErrorMessage: null,
                deferredValidationTime: 200,
                key: 'approversPicker',
              }),
            ],
          },
        ],
      },
    ],
  };
}

A few notes from production use:

  • context must be the full WebPartContext, not context.msGraphClientFactory. The control needs the site URL to resolve SharePoint groups.
  • Setting principalType to only PrincipalType.User is worth it for approval scenarios — letting users pick a group silently hides who gets the notification.
  • If you are in a multi-geo tenant, test against a satellite site. The picker is scoped to the web, and cross-geo group resolution occasionally throws silent timeouts.

The full control catalogue lives at pnp.github.io/sp-dev-fx-property-controls. The collection data control is the other one I reach for constantly — worth its own post.