SharePoint Framework

For its form controls, the SPFx Property Pane (PP) relies on a declarative model:

groupFields: [
  PropertyPaneTextField('description', {label: strings.DescriptionFieldLabel}),
  PropertyPaneHorizontalRule(),
  PropertyPaneToggle('toggleProperty', toggleControlProperties),
  ...

But how would you add to the Property Pane a custom control, not covered by the built-in functions offered by Microsoft? For example a date picker or a dropdown with dynamic choices?

That's where the Property Pane Wrap comes into play. It lets you wrap a React component for insertion in the Property Pane.

In your SPFx solution, import the package:

npm i property-pane-wrap

This will make the PropertyPaneWrap function available to your solution.

See the list of samples for detailed implementation. Below the high level steps.

1. Declare your custom property as you would usually do in HelloWorldWebPart.tsx.

2. Import PropertyPaneWrap to HelloWorldWebPart:

import { PropertyPaneWrap } from 'property-pane-wrap';

3. Use PropertyPaneWrap in the Property Pane configuration:

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {label: strings.DescriptionFieldLabel}),
                PropertyPaneHorizontalRule(),
                PropertyPaneWrap('mgtPeoplePicker', {
                  component: PeoplePicker,
                  props: {
                    selectionMode: "single",
                    selectionChanged: onSelectionChanged
                  }
                }),
                ...

• React-PPW-MGT: showcase Microsoft Graph Toolkit components in the SPFx Property Pane.
• React-PPW-FastFluentUI: showcase Fluent UI Fast Web components in the SPFx Property Pane.
• React-PPW-PnPControls: showcase the use of the PnP SPFx controls library in the SPFx Property Pane.

For issues, comments or questions, please reach out to Christophe on twitter (Path2SharePoint), github (PathToSharePoint), or stackoverflow (Christophe) with the hashtag #PropertyPaneWrap.

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.