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.
-
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
}
}),
...
- 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 | Author(s) |
---|---|
property-pane-wrap | Christophe Humbert |
Version | Date | Comments |
---|---|---|
0.1.0 | Jan 25, 2022 | First release |
0.3.0 | Feb 5, 2022 | Code Cleanup |
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.