@microsoft/sp-webpart-base package

SharePoint Framework support for building web parts.

Remarks

This package defines the APIs used by developers to create a custom web part. A web part is a reusable visual object that a page author can add to their content, and customize using a property pane. Examples of web parts include an embedded video player, a map, a group calendar, a chart, etc.

Classes

BaseClientSideWebPart

This abstract class implements the the base functionality for a client-side web part. Every client-side web part needs to inherit from this class.

BaseWebPart

This abstract class implements the UI-agnostic base functionality for a client-side web part. The purpose is to allow a common core between 2D and MR WebParts.

BaseWebPartContext

Web part context object. This object contains the contextual services available to a web part. e.g. a contextual instance to the http client.

This base is to be extended by UI-specific WebPart's base.

WebPartContext

Web part context object. This object contains the contextual services available to a web part. e.g. a contextual instance to the http client.

Interfaces

IClientSideWebPartStatusRenderer

Interface to be implemented by a component that should display the loading indicator and error messages for a web part.

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.

IMicrosoftTeams

Provides access to the Teams SDK and Teams context. Only provided when the web part is loaded in Teams.

IPropertyPaneAccessor

Web part context property pane accessor interface. Provides some most commonly used operations to access the property pane.

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.

IPropertyPaneDropdownCalloutProps

PropertyPane dropdown callout properties.

IPropertyPaneDropdownOption

PropertyPane drop down options.

IPropertyPaneDropdownProps

PropertyPane drop down component props.

IPropertyPaneDynamicFieldFilters

Property pane dynamic field filters which is an intersection of both source and property filters.

IPropertyPaneDynamicFieldProps

PropertyPaneDynamicField props.

IPropertyPaneDynamicFieldSetProps

PropertyPane DynamicFieldSet props.

IPropertyPaneDynamicTextFieldProps

PropertyPaneDynamicData component props.

IPropertyPaneField

PropertyPane field.

IPropertyPaneGroup

PropertyPane group. Group is part of the PropertyPanePage.

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.

IPropertyPaneToggleProps

PropertyPaneToggle component props.

ISDKs

Conditional set of SDKs provided by SPFx dependent on the environment.

ISerializedServerProcessedData

Contains collections of data that can be processed by server side services like search index and link fixup

ISerializedWebPartData

This structure represents the part of the serialized state of a web part which is controlled by the web part. It is extended by IWebPartData which contains additional data added by the framework to the serialized data.

IWebPartContext

The base context interface for client-side web parts.

IWebPartData

This structure represents the serialized state of a web part.

IWebPartPropertiesMetadata

This structure is used to define metadata for web part properties as a map of string to IWebPartPropertyMetadata

IWebPartPropertyMetadata

This is the structure used for map values in IWebPartPropertiesMetadata

Enums

DynamicDataSharedDepth

Enum for the possible values of shared depth of the dynamic data reference.

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.

WebPartFormFactor

Form factor of the web part.

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.

PropertyPaneHorizontalRule()

Helper method to create a Horizontal Rule 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.

PropertyPaneToggle(targetProperty, properties)

Helper method to create a Toggle on the PropertyPane.

Function Details

PropertyPaneButton(targetProperty, properties)

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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)

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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)

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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)

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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)

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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)

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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.

Returns

IPropertyPaneField<IPropertyPaneDynamicFieldProps>

PropertyPaneDynamicFieldSet(properties)

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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

This has been replaced by PropertyPaneDynamicField and moved to @microsoft/sp-property-pane. Please consume it from there.

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>

PropertyPaneHorizontalRule()

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

Helper method to create a Horizontal Rule on the PropertyPane.

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

Returns

IPropertyPaneField<void>

PropertyPaneLabel(targetProperty, properties)

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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>

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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)

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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)

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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>

PropertyPaneToggle(targetProperty, properties)

Warning

This API is now obsolete.

This is obsolete now. This function has been moved to @microsoft/sp-property-pane. Please consume it from there.

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>