README

Property Pane Wrap

Applies to

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.

Declare your custom property as you would usually do in HelloWorldWebPart.tsx.
Import PropertyPaneWrap to HelloWorldWebPart:

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

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.

Usage no npm install needed!