@microsoft/sp-property-pane package

SharePoint Framework property pane.

Interfaces

IDynamicDataSharedPropertyConfiguration	Configuration related to a shared property.
IDynamicDataSharedPropertyFilters	Property pane dynamic data property filters.
IDynamicDataSharedSourceConfiguration	Configuration related to a shared source.
IDynamicDataSharedSourceFilters	Property pane dynamic data source filters.
IGuidSet	Set of GUIDs representing a list item.
IPopupWindowProps	Popup window props.
IPropertyPaneButtonProps	PropertyPane button props.
IPropertyPaneCheckboxProps	PropertyPane CheckBox component props.
IPropertyPaneChoiceGroupOption	PropertyPane ChoiceGroup option props.
IPropertyPaneChoiceGroupOptionIconProps	PropertyPane ChoiceGroup icon props.
IPropertyPaneChoiceGroupProps	PropertyPane ChoiceGroup props.
IPropertyPaneConditionalGroup	Property pane conditional group.
IPropertyPaneConfiguration	Web part configuration settings
IPropertyPaneCustomFieldProps	PropertyPane CustomPropertyField props.
IPropertyPaneDebounceProperty	Definition of a Property Pane property, which should have the onPropertyPaneFieldChanged event be debounced.
IPropertyPaneDropdownCalloutProps	PropertyPane dropdown callout properties.
IPropertyPaneDropdownOption	PropertyPane drop down options.
IPropertyPaneDropdownProps	PropertyPane drop down component props.
IPropertyPaneDynamicFieldProps	PropertyPaneDynamicField props.
IPropertyPaneDynamicFieldSetProps	PropertyPane DynamicFieldSet props.
IPropertyPaneDynamicTextFieldProps	PropertyPaneDynamicData component props.
IPropertyPaneField	PropertyPane field.
IPropertyPaneGroup	PropertyPane group. Group is part of the PropertyPanePage.
IPropertyPaneHeadingProps	PropertyPaneHeader component props.
IPropertyPaneIconPickerProps	PropertyPaneIconPicker component props
IPropertyPaneLabelProps	PropertyPaneLabel component props.
IPropertyPaneLinkProps	PropertyPaneLink component props.
IPropertyPanePage	PropertyPanePage interface.
IPropertyPanePageHeader	PropertyPane header. This header remains same for all the pages.
IPropertyPaneSliderProps	PropertyPaneSliderProps component props.
IPropertyPaneTextFieldProps	PropertyPaneTextField component props.
IPropertyPaneThumbnailPickerProps	PropertyPaneThumbnailPicker component props
IPropertyPaneToggleProps	PropertyPaneToggle component props.
IThumbnailFabricReactIcon	Options related to fabric icon thumbnail.
IThumbnailIconSizeImage	Options related to icon sized image thumbnail.
IThumbnailImage	Options related to image thumbnail.

Type Aliases

ImageFit	The possible methods that can be used to fit the image.
IPropertyPaneDynamicFieldFilters	Property pane dynamic field filters which is an intersection of both source and property filters.
IThumbnail	The type of thumbnail image being configured.
PropertyPaneHeadingLevel	Type for the heading levels, h1-h6
ThumbnailType	Supported thumbnail image types.

Enums

DynamicDataSharedDepth	Enum for the possible values of shared depth of the dynamic data reference.
PopupWindowPosition	The position of pop up window.
PropertyPaneButtonType	Enum for all the supported button types.
PropertyPaneDropdownOptionType	Specifies the type of option in a dropdown menu rendered by PropertyPaneDropdown().
PropertyPaneFieldType	Enum for all the supported PropertyPane field types. Names should be consistent with those in office-ui-fabric-react, be careful to get letter casing correct.

Functions

PropertyPaneButton(targetProperty, properties)	Helper method to create a Button on the PropertyPane.
PropertyPaneCheckbox(targetProperty, properties)	Helper method to create a Checkbox on the PropertyPane.
PropertyPaneChoiceGroup(targetProperty, properties)	Helper method to create a Choice Group on the PropertyPane.
PropertyPaneCustomField(properties)	Helper method to create a custom field on the PropertyPane.
PropertyPaneDropdown(targetProperty, properties)	Helper method to create a Dropdown on the PropertyPane.
PropertyPaneDynamicField(targetProperty, properties)	Helper method to create a Dynamic Data widget on the PropertyPane for a dynamic field.
PropertyPaneDynamicFieldSet(properties)	Helper method to create a Dynamic Data widget on the Property Pane for a set of dynamic fields with a common data source. These fields can possibly share the same property based on the associated filters.
PropertyPaneDynamicTextField(targetProperty, properties)	Helper method to create a Dynamic TextField on the PropertyPane.
PropertyPaneHeading(targetProperty, properties)	Helper method to create a heading on the PropertyPane. Temporary solution while waiting for redesign
PropertyPaneHorizontalRule()	Helper method to create a Horizontal Rule on the PropertyPane.
PropertyPaneIconPicker(targetProperty, properties)	Helper method to create an IconPicker on the PropertyPane.
PropertyPaneLabel(targetProperty, properties)	Helper method to create a Label on the PropertyPane.
PropertyPaneLink(targetProperty, properties)	Helper method to create a Link on the PropertyPane.
PropertyPaneSlider(targetProperty, properties)	Helper method to create a Slider on the PropertyPane.
PropertyPaneTextField(targetProperty, properties)	Helper method to create a TextField on the PropertyPane.
PropertyPaneThumbnailPicker(targetProperty, properties)	Helper method to create a ThumbnailPicker on the PropertyPane.
PropertyPaneToggle(targetProperty, properties)	Helper method to create a Toggle on the PropertyPane.

Function Details

PropertyPaneButton(targetProperty, properties)

Helper method to create a Button on the PropertyPane.

export declare function PropertyPaneButton(targetProperty: string, properties: IPropertyPaneButtonProps): IPropertyPaneField<IPropertyPaneButtonProps>;

Parameters

targetProperty

string

Target property the Button is associated to.

properties

IPropertyPaneButtonProps

Strongly typed Button properties.

Returns

IPropertyPaneField<IPropertyPaneButtonProps>

PropertyPaneCheckbox(targetProperty, properties)

Helper method to create a Checkbox on the PropertyPane.

export declare function PropertyPaneCheckbox(targetProperty: string, properties: IPropertyPaneCheckboxProps): IPropertyPaneField<IPropertyPaneCheckboxProps>;

Parameters

targetProperty

string

Target property the checkbox is associated to.

properties

IPropertyPaneCheckboxProps

Strongly typed Checkbox properties.

Returns

IPropertyPaneField<IPropertyPaneCheckboxProps>

PropertyPaneChoiceGroup(targetProperty, properties)

Helper method to create a Choice Group on the PropertyPane.

export declare function PropertyPaneChoiceGroup(targetProperty: string, properties: IPropertyPaneChoiceGroupProps): IPropertyPaneField<IPropertyPaneChoiceGroupProps>;

Parameters

targetProperty

string

Target property the choice group is associated to.

properties

IPropertyPaneChoiceGroupProps

Strongly typed Choice Group properties.

Returns

IPropertyPaneField<IPropertyPaneChoiceGroupProps>

PropertyPaneCustomField(properties)

Note

This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

Helper method to create a custom field on the PropertyPane.

export declare function PropertyPaneCustomField(properties: IPropertyPaneCustomFieldProps): IPropertyPaneField<IPropertyPaneCustomFieldProps>;

Parameters

properties

IPropertyPaneCustomFieldProps

Strongly typed Custom field properties.

Returns

IPropertyPaneField<IPropertyPaneCustomFieldProps>

Remarks

The purpose of the custom field is to help the web part developer to add a custom control to the PropertyPane. The PropertyPane supports a host of inbuilt field types. While this list meets the demands of most web parts, but there are exceptional cases when web parts have special needs and need a special control. The custom field helps fill that gap.

PropertyPaneDropdown(targetProperty, properties)

Helper method to create a Dropdown on the PropertyPane.

export declare function PropertyPaneDropdown(targetProperty: string, properties: IPropertyPaneDropdownProps): IPropertyPaneField<IPropertyPaneDropdownProps>;

Parameters

targetProperty

string

Target property the dropdown is associated to.

properties

IPropertyPaneDropdownProps

Strongly typed Dropdown properties.

Returns

IPropertyPaneField<IPropertyPaneDropdownProps>

PropertyPaneDynamicField(targetProperty, properties)

Helper method to create a Dynamic Data widget on the PropertyPane for a dynamic field.

export declare function PropertyPaneDynamicField(targetProperty: string, properties: IPropertyPaneDynamicFieldProps): IPropertyPaneField<IPropertyPaneDynamicFieldProps>;

Parameters

targetProperty

string

Target property the Dynamic Data widget is associated to.

properties

IPropertyPaneDynamicFieldProps

Returns

IPropertyPaneField<IPropertyPaneDynamicFieldProps>

PropertyPaneDynamicFieldSet(properties)

Helper method to create a Dynamic Data widget on the Property Pane for a set of dynamic fields with a common data source.

These fields can possibly share the same property based on the associated filters.

export declare function PropertyPaneDynamicFieldSet(properties: IPropertyPaneDynamicFieldSetProps): IPropertyPaneField<IPropertyPaneDynamicFieldSetProps>;

Parameters

properties

IPropertyPaneDynamicFieldSetProps

Contains entries and options, described as below: entries - A set of entries to be configured by the widget. Each entry includes the target property and, optionally, the label to show. options - Options enabling customized values for callback, filters etc., for the given set of dynamic fields.

Returns

IPropertyPaneField<IPropertyPaneDynamicFieldSetProps>

PropertyPaneDynamicTextField(targetProperty, properties)

Warning

This API is now deprecated.

• This has been replaced by PropertyPaneDynamicField

Note

This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

Helper method to create a Dynamic TextField on the PropertyPane.

export declare function PropertyPaneDynamicTextField(targetProperty: string, properties: IPropertyPaneDynamicTextFieldProps): IPropertyPaneField<IPropertyPaneDynamicTextFieldProps>;

Parameters

targetProperty

string

Target property the dynamic textfield is associated to.

properties

IPropertyPaneDynamicTextFieldProps

Properties of the PropertyPaneDynamicTextField.

Returns

IPropertyPaneField<IPropertyPaneDynamicTextFieldProps>

PropertyPaneHeading(targetProperty, properties)

Note

This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

Helper method to create a heading on the PropertyPane. Temporary solution while waiting for redesign

export declare function PropertyPaneHeading(targetProperty: string, properties: IPropertyPaneHeadingProps): IPropertyPaneField<IPropertyPaneHeadingProps>;

Parameters

targetProperty

string

Target property the label is associated to.

properties

IPropertyPaneHeadingProps

Strongly typed Label properties.

Returns

IPropertyPaneField<IPropertyPaneHeadingProps>

PropertyPaneHorizontalRule()

Helper method to create a Horizontal Rule on the PropertyPane.

export declare function PropertyPaneHorizontalRule(): IPropertyPaneField<void>;

Returns

IPropertyPaneField<void>

PropertyPaneIconPicker(targetProperty, properties)

Note

This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

Helper method to create an IconPicker on the PropertyPane.

export declare function PropertyPaneIconPicker(targetProperty: string, properties: IPropertyPaneIconPickerProps): IPropertyPaneField<IPropertyPaneIconPickerProps>;

Parameters

targetProperty

string

Target property the icon picker is associated to.

properties

IPropertyPaneIconPickerProps

Strongly typed IconPicker properties.

Returns

IPropertyPaneField<IPropertyPaneIconPickerProps>

PropertyPaneLabel(targetProperty, properties)

Helper method to create a Label on the PropertyPane.

export declare function PropertyPaneLabel(targetProperty: string, properties: IPropertyPaneLabelProps): IPropertyPaneField<IPropertyPaneLabelProps>;

Parameters

targetProperty

string

Target property the label is associated to.

properties

IPropertyPaneLabelProps

Strongly typed Label properties.

Returns

IPropertyPaneField<IPropertyPaneLabelProps>

PropertyPaneLink(targetProperty, properties)

Helper method to create a Link on the PropertyPane.

export declare function PropertyPaneLink(targetProperty: string, properties: IPropertyPaneLinkProps): IPropertyPaneField<IPropertyPaneLinkProps>;

Parameters

targetProperty

string

Target property the Link is associated to.

properties

IPropertyPaneLinkProps

Strongly typed Link properties.

Returns

IPropertyPaneField<IPropertyPaneLinkProps>

PropertyPaneSlider(targetProperty, properties)

Helper method to create a Slider on the PropertyPane.

export declare function PropertyPaneSlider(targetProperty: string, properties: IPropertyPaneSliderProps): IPropertyPaneField<IPropertyPaneSliderProps>;

Parameters

targetProperty

string

Target property the slider is associated to.

properties

IPropertyPaneSliderProps

Strongly typed Slider properties.

Returns

IPropertyPaneField<IPropertyPaneSliderProps>

PropertyPaneTextField(targetProperty, properties)

Helper method to create a TextField on the PropertyPane.

export declare function PropertyPaneTextField(targetProperty: string, properties: IPropertyPaneTextFieldProps): IPropertyPaneField<IPropertyPaneTextFieldProps>;

Parameters

targetProperty

string

Target property the textfield is associated to.

properties

IPropertyPaneTextFieldProps

Strongly typed TextField properties.

Returns

IPropertyPaneField<IPropertyPaneTextFieldProps>

PropertyPaneThumbnailPicker(targetProperty, properties)

Note

This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

Helper method to create a ThumbnailPicker on the PropertyPane.

export declare function PropertyPaneThumbnailPicker(targetProperty: string, properties: IPropertyPaneThumbnailPickerProps): IPropertyPaneField<IPropertyPaneThumbnailPickerProps>;

Parameters

targetProperty

string

Target property the thumbnail picker is associated to.

properties

IPropertyPaneThumbnailPickerProps

Strongly typed ThumbnailPicker properties.

Returns

IPropertyPaneField<IPropertyPaneThumbnailPickerProps>

PropertyPaneToggle(targetProperty, properties)

Helper method to create a Toggle on the PropertyPane.

export declare function PropertyPaneToggle(targetProperty: string, properties: IPropertyPaneToggleProps): IPropertyPaneField<IPropertyPaneToggleProps>;

Parameters

targetProperty

string

Target property the toggle is associated to.

properties

IPropertyPaneToggleProps

Strongly typed Toggle properties.

Returns

IPropertyPaneField<IPropertyPaneToggleProps>