Reusable property pane controls for the SharePoint Framework solutions ¶
This repository provides developers with a set of reusable property pane controls that can be used in their SharePoint Framework (SPFx) solutions.
In order to migrate to
v1 it is advised to follow this guide: Migrating from V1.
Currently there are 3 active versions of the controls. Please, reference the table below to see what version to use in your project.
|Version||SPFx minimal dependency||Fluent UI (Office UI Fabric React) version||SharePoint Version||Comments|
||Online||The most current, actively maintained version of the library.|
||Online||The version deprecated and not actively maintained.
We strongly recommend to update to SPFx
||On-Prem||The version is maintained for SharePoint On-Prem 2016 and 2019 implementations. Be aware that the controls might not work in solutions you're building for on-premises. As for on-premises solutions version
If you are using
v3 of the Controls with SPFx
1.12.1 you will need to cast web part context to
any to pass it to the controls.
To get started you have to install the following dependency to your project:
Enter the following command to install the dependency to your project:
npm install @pnp/spfx-property-controls --save --save-exact
v1.7.0 the localized resource path will automatically be configured during the dependency installing.
Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the
config/config.json and adding the following line to the
All controls gather telemetry to verify the usage. Only the name of the control and related data gets captured.
More information about the service that we are using for this can be found here: PnP Telemetry Proxy.
1.17.0 it is possible to opt-out of the telemetry by adding the following code to your web part:
import PnPTelemetry from "@pnp/telemetry-js"; ... const telemetry = PnPTelemetry.getInstance(); telemetry.optOut();
The following controls are currently available:
- PropertyFieldCodeEditor (Property pane code editor)
- PropertyFieldCollectionData (Property pane collection data editor)
- PropertyFieldColorPicker (Property pane color picker)
- PropertyFieldColumnPicker (Property pane list column picker)
- PropertyFieldDateTimePicker (Property pane date and time selector)
- PropertyFieldFilePicker (Property pane file picker)
- PropertyFieldFolderPicker (Property pane folder picker)
- PropertyFieldGuid (Property pane GUID editor)
- PropertyFieldIconPicker (Property pane icon picker)
- PropertyFieldListPicker (Property pane list selector)
- PropertyFieldMessage (Property pane message)
- PropertyFieldMonacoEditor (Property pane Monaco Editor)
- PropertyFieldMultiSelect (Property pane multi select dropdown)
- PropertyFieldNumber (Property pane number editor)
- PropertyFieldOrder (Property pane ordered list editor)
- PropertyFieldPassword (Property pane password editor)
- PropertyFieldPeoplePicker (Property pane people / group selector)
- PropertyFieldRoleDefinitionPicker (Property pane role definition picker)
- PropertyFieldSearch (Property pane search box)
- PropertyFieldSitePicker (Property pane site selector)
- PropertyFieldSpinButton (Property pane spin button)
- PropertyFieldSpinner (Property pane spinner)
- PropertyFieldSwatchColorPicker (Property pane color selector)
- PropertyFieldTeamPicker (Property pane team selector)
- PropertyFieldTermPicker (Property pane managed metadata term selector)
- PropertyFieldEnterpriseTermPicker (Property pane managed metadata term selector for enterprise scenarios)
- PropertyFieldViewPicker (Property pane view selector)
- PropertyPaneMarkdownContent (Property pane markdown content)
- PropertyPanePropertyEditor (Property pane control that allows raw editing, export and import of webpart properties)
- PropertyPaneWebPartInformation (Property pane webpart information panel)
The following controls are extended controls that show a callout next to the label
- PropertyFieldButtonWithCallout (Property button field with callout)
- PropertyFieldCheckboxWithCallout (Property checkbox field with callout)
- PropertyFieldChoiceGroupWithCallout (Property choice group field with callout)
- PropertyFieldDropdownWithCallout (Property dropdown field with callout)
- PropertyFieldLabelWithCallout (Property label field with callout)
- PropertyFieldLinkWithCallout (Property link field with callout)
- PropertyFieldSliderWithCallout (Property slider field with callout)
- PropertyFieldTextWithCallout (Property text field with callout)
- PropertyFieldToggleWithCallout (Property toggle field with callout)