Property Pane Wrap

Applies to

SharePoint Framework

Compatibility

About the Property Pane Wrap

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.

How to Use the Package

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
                  }
                }),
                ...

Samples (work in progress)

• 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.

Solution

Solution|Author(s) --------|--------- property-pane-wrap | Christophe Humbert

Version history

Version|Date|Comments -------|----|-------- 0.1.0|Jan 25, 2022|First release 0.3.0|Feb 5, 2022|Code Cleanup

Help

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

Disclaimer

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.