sp-webpart-base module


Class Description
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. Along with the base functionality, this class provides some APIs that can be used by the web part. These APIs fall in two catagories. The first category of APIs provide data and functionality. Example, the web part context (i.e. this.context). This API should be used to access contextual data relevant to this web part instance. The second category of APIs provide a base implementation for the web part lifecycle and can be overridden for an updated implementation. The render() API is the only API that is mandatory to be implemented/overridden by a web part. All other life cycle APIs have a base implementation and can be overridden based on the needs of the web part. Please refer to the documentation of the individual APIs to make the right decision.


Interface Description
IClientSideWebPartStatusRenderer Interface to be implemented by a component that should display the loading indicator and error messages for a webpart.
IPlaceholderProps Used to display a placeholder in case of no or temporary content. Button is optional.
IPlaceholderSpinnerProps Interface for properties used to display the loading spinner in the web part display area.
IPropertyPaneButtonProps PropertyPane button props.
IPropertyPaneCheckboxProps PropertyPane CheckBox component props.
IPropertyPaneChoiceGroupOption PropertyPane ChoiceGroup option props.
IPropertyPaneChoiceGroupProps PropertyPane ChoiceGroup props.
IPropertyPaneConfiguration Web part configuration settings
IPropertyPaneCustomFieldProps PropertyPane CustomPropertyField props.
IPropertyPaneDropdownOption PropertyPane drop down options.
IPropertyPaneDropdownProps PropertyPane drop down 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.
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. When the serialize() API is called on a web part, the output should be this structure. The structure of the 'properties' field is owned by the web part and is specific to the web part. Each web part can decide the set of properties it wants to serialialize.
IWebPartPropertiesMetadata This structure is used to define metadata for web part propeties as a map of string to IWebPartPropertyMetadata The key should be a json path to the property in web part propeties. The json path supports the following operators: - Dot . for selecting object members e.g. person.name - Brackets [] for selecting array items e.g. person.photoURLs[0] - Bracketed asterisk [] for array elements wildcard e.g. person.websites[]. You can make combinations of these operators e.g. person.websites[*].url Important Note: Only one wildcard per path is supported. Example: Let's assume we have a web part with properties that have the following schema: { title: string; person: { name: string; bio: string; photoURLs: string[]; websites: { title: string; url: string; }[] } } We can define the metadata for the desired properties as following: { 'person.bio': { isRichContent: true }, 'person.photoURLs[]': { isImageSource: true }, 'person.websites[].url': { isLink: true } } This will make SharePoint servers aware of the content of your properties and run services such as search indexing, link fix-up, etc on the data. In case any of the values needs to update by these services, e.g link fix-up, the web part property bag is automatically updated.


Function Returns Description
PropertyPaneButton(targetProperty,properties) IPropertyPaneField<IPropertyPaneButtonProps> Helper method to create a Button on the PropertyPane.
PropertyPaneCheckbox(targetProperty,properties) IPropertyPaneField<IPropertyPaneCheckboxProps> Helper method to create a Checkbox on the PropertyPane.
PropertyPaneChoiceGroup(targetProperty,properties) IPropertyPaneField<IPropertyPaneChoiceGroupProps> Helper method to create a Choice Group on the PropertyPane.
PropertyPaneDropdown(targetProperty,properties) IPropertyPaneField<IPropertyPaneDropdownProps> Helper method to create a Dropdown on the PropertyPane.
PropertyPaneHorizontalRule(properties) IPropertyPaneField Helper method to create a Horizontal Rule on the PropertyPane.
PropertyPaneLabel(targetProperty,properties) IPropertyPaneField<IPropertyPaneLabelProps> Helper method to create a Label on the PropertyPane.
PropertyPaneLink(targetProperty,properties) IPropertyPaneField<IPropertyPaneLinkProps> Helper method to create a Link on the PropertyPane.
PropertyPaneSlider(targetProperty,properties) IPropertyPaneField<IPropertyPaneSliderProps> Helper method to create a Slider on the PropertyPane.
PropertyPaneTextField(targetProperty,properties) IPropertyPaneField<IPropertyPaneTextFieldProps> Helper method to create a TextField on the PropertyPane.
PropertyPaneToggle(targetProperty,properties) IPropertyPaneField<IPropertyPaneToggleProps> Helper method to create a Toggle on the PropertyPane.


Enumeration Description
PropertyPaneButtonType Enum for all the supported button types.
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.