By 
In this “Create custom property in SharePoint” article, we will learn about how we can add a custom additional property to the SharePoint Framework -SPFx web part in the web part configuration pane. This is my third article in the SPFx framework learning series – you may refer to my previous articles:
- Understanding solution structure in SharePoint framework (SPFx)
- Develop your first hello world web part in sharepoint framework (SPFx)
Create custom property in SharePoint Framework – SPFx web part pane
First, let’s look at the below screenshot – when we developed the default first hello world web part, we can see only the “Description” property in the web part property configuration pane. However, now we could see some additional configurable properties like Multi-line-Text Field, Checkbox, Dropdown, and Toggle control in the web part configuration pane. Here, in this article, I will explain how these additional controls have been added over here.
Create custom property in SharePoint Framework (custom properties SharePoint) – Coding
I am not describing how to create a new project here – I am taking forward my previous demo project(Hello World), and starting from here. Step 1: Import the necessary property pane from the ‘@microsoft/sp-property-pane’ Let’s open the HelloWorldWebPart.ts file from the project file structure. At the beginning of this file, we must add the below code otherwise this will not work.
import {
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneCheckbox,
PropertyPaneDropdown,
PropertyPaneToggle
} from '@microsoft/sp-property-pane';
Note:
- In the above import, we can import as many allowed property pane we want – here I am importing Text Field, Checkbox, Dropdown, Toggle.
Step 2:
Add the above fields in the export section. In the below IHelloWorldWebPartProps interface by default when we create default hello world web part, we will just have “description: string” property now we have added the below additional property test: string; test1: boolean; test2: string; test3: boolean;
export interface IHelloWorldWebPartProps
{
description: string;
test: string;
test1: boolean;
test2: string;
test3: boolean;
}
Step 3: Handle the page render section Go to the default class HelloWorldWebPart extends BaseClientSideWebPart <IHelloWorldWebPartProps> section. By default, we can see the below line for the rendering of the description field. <p class=”${ styles.description }”>${escape(this.properties.description)}</p>
export default class HelloWorldWebPart extends BaseClientSideWebPart <IHelloWorldWebPartProps>
{
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.helloWorld }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${ styles.title }">Welcome to SharePoint!</span>
<p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
<p class="${ styles.description }">${escape(this.properties.description)}</p>
<p class="${ styles.description }">${escape(this.properties.test)}</p>
<p class="${ styles.description }">${escape(this.properties.test2)}</p>
<a href="https://aka.ms/spfx" class="${ styles.button }">
<span class="${ styles.label }">Learn more</span>
</a>
</div>
</div>
</div>
</div>`;
}
Now, in the same file – let’s go to the getPropertyPaneConfiguration() method which has been inherited from IPropertyPaneConfiguration. We can see all the below additional properties have been added in the “Groups” section just below the default property description.
- PropertyPaneTextField
- PropertyPaneCheckbox
- PropertyPaneDropdown
- PropertyPaneToggle
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration
{
return
{
pages: [
{
header:
{
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: 'Description'
}),
PropertyPaneTextField('test', {
label: 'Multi-line Text Field',
multiline: true
}),
PropertyPaneCheckbox('test1', {
text: 'Checkbox'
}),
PropertyPaneDropdown('test2', {
label: 'Dropdown',
options: [
{ key: '1', text: 'One' },
{ key: '2', text: 'Two' },
{ key: '3', text: 'Three' },
{ key: '4', text: 'Four' }
]}),
PropertyPaneToggle('test3', {
label: 'Toggle',
onText: 'On',
offText: 'Off'
})
]
}
]
}
]
};
}
All the below property functions have been defined in “index-internal.d.ts” file.
- PropertyPaneTextField
- PropertyPaneCheckbox
- PropertyPaneDropdown
- PropertyPaneToggle
So if we go the definition of all the above each property function we will land into the below : PropertyPaneTextField
export declare function PropertyPaneTextField(targetProperty: string, properties: IPropertyPaneTextFieldProps): IPropertyPaneField<IPropertyPaneTextFieldProps>;
export declare function PropertyPaneCheckbox(targetProperty: string, properties: IPropertyPaneCheckboxProps): IPropertyPaneField<IPropertyPaneCheckboxProps>;
export declare function PropertyPaneDropdown(targetProperty: string, properties: IPropertyPaneDropdownProps): IPropertyPaneField<IPropertyPaneDropdownProps>;
export declare function PropertyPaneToggle(targetProperty: string, properties: IPropertyPaneToggleProps): IPropertyPaneField<IPropertyPaneToggleProps>;
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" },
"title": { "default": "HelloWorld" },
"description": { "default": "HelloWorld description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "HelloWorld",
"test": "Multi-line text field",
"test1": true,
"test2": "2",
"test3": true
}
}]
PropertyPaneDropdown('test2', {
label: 'Dropdown',
options: [
{ key: '1', text: 'One' },
{ key: '2', text: 'Two' },
{ key: '3', text: 'Three' },
{ key: '4', text: 'Four' }
]}),
Custom property pane SPFx (SPFx web part property pane) – What field types are supported in the web part property pane?
- Button
- Checkbox
- Choice group
- Dropdown
- Horizontal rule
- Label
- Link
- Slider
- Textbox
- Multi-line Textbox
- Toggle
- Custom
Download: Create custom property in SharePoint Framework – SPFx web part pane
Summary: Create custom property in SharePoint Framework – SPFx web part pane
- How do we create a custom property pane field?
- What is the SharePoint framework custom property pane?
- What field types are supported in the web part property pane?
See Also: SharePoint Online tutorial
You may also like the below SharePoint Online tutorials:
- Understanding solution structure in SharePoint framework (SPFx)
- Develop your first hello world web part in sharepoint framework (SPFx)
- Column header formatting in SharePoint list Quick Edit or Datasheet View
- Enable and configure information rights management (IRM) in SharePoint Online
- Manage recycle bin in SharePoint Online – Office 365
- In 4 steps create office 365 trial account – sign up free subscription
- Add more than 5 conditions in InfoPath form’s rule
- How to validate the date column in Infopath form
- How to a copy list item to another list using SharePoint designer workflow
- SharePoint Framework (SPFx) development environment Setup step by step
- 3 ways add a picture library in the communication site – SharePoint Online
- SharePoint generation or version history from the year 2000 to 2020
- Office 365: Getting started with SharePoint PnP PowerShell – installation
- In 2 steps convert a classic SharePoint page to modern using PnP
- Office 365: Retrieve hub sites and associated sites using PnP Powershell
- Create a modern team site using PnP PowerShell in SharePoint
- In 4 steps access SharePoint online data using postman tool
- SharePoint admin center: Learn SharePoint online administration in an hour – step by step
- SharePoint REST API: GET vs POST vs PUT vs DELETE vs PATCH
- Office 365: Understanding the hub site in SharePoint online
- Create SharePoint online list using PnP provisioning template
- List Template IDs In SharePoint Online/SharePoint 2019/2016/2013/2010/2007
Download SharePoint Online & Office 365 Administration eBook
Buy the premium version of SharePoint Online & Office 365 administration eBook from here:
Get the free demo PDF eBook from here:
Send download link to:
About Post Author
Discover more from Global SharePoint
Subscribe to get the latest posts sent to your email.
3 comments on “In 2 steps instantly create custom property in SharePoint Framework – SPFx web part pane”