42,330 total views, 4 views today
In this 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)

import { IPropertyPaneConfiguration, PropertyPaneTextField, PropertyPaneCheckbox, PropertyPaneDropdown, PropertyPaneToggle } from '@microsoft/sp-property-pane';
@microsoft/sp-property-pane for the custom property in the HelloWorldWebPart.ts file.

- In the above import, we can import as many allowed property pane we want – here I am importing Text Field, Checkbox, Dropdown, Toggle.
export interface IHelloWorldWebPartProps { description: string; test: string; test1: boolean; test2: string; test3: boolean; }
Then below to that, we can add the custom additional fields like added below(see the high lighted lines).
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>`; }
Step 4: Grouping the custom columns
- 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' }) ] } ] } ] }; }
- PropertyPaneTextField
- PropertyPaneCheckbox
- PropertyPaneDropdown
- PropertyPaneToggle
export declare function PropertyPaneTextField(targetProperty: string, properties: IPropertyPaneTextFieldProps): IPropertyPaneField<IPropertyPaneTextFieldProps>;
PropertyPaneCheckbox
export declare function PropertyPaneCheckbox(targetProperty: string, properties: IPropertyPaneCheckboxProps): IPropertyPaneField<IPropertyPaneCheckboxProps>;
PropertyPaneDropdown
export declare function PropertyPaneDropdown(targetProperty: string, properties: IPropertyPaneDropdownProps): IPropertyPaneField<IPropertyPaneDropdownProps>;
PropertyPaneToggle
export declare function PropertyPaneToggle(targetProperty: string, properties: IPropertyPaneToggleProps): IPropertyPaneField<IPropertyPaneToggleProps>;
index-internal.d.ts – This file is automatically created which looks like below:

HelloWorldWebPart.manifest.json
Now let’s go to the HelloWorldWebPart.manifest.json file. Down to this file, we can see
preconfiguredEntries JSON – here we can set all default value to property pane controls.
"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 } }]
As we have set the default value for the above – highlighted properties, at run time we can see the below default value in the web part property pane:
Description text box has HelloWorld
Multi-lineText Field has Multi-line text field
Checkbox by default is selected (true).
The dropdown has default two
Toggle by default is on (true).

Note:
In the above example, for the dropdown in the JSON, it is set as 2 but while rendering the web part it displays as “Two“, you may ask why?
This is because of the key-value parameter mapping in the PropertyPaneDropdown function which is located at the HelloWorldWebPart.ts file where “2” is mapped with the “Two” text.
PropertyPaneDropdown('test2', { label: 'Dropdown', options: [ { key: '1', text: 'One' }, { key: '2', text: 'Two' }, { key: '3', text: 'Three' }, { key: '4', text: 'Four' } ]}),
HelloWorldWebPart.manifest.json file in the actual project(solution):

What are the field types are supported in the web part property pane?
The following field types are supported in the web part property pane configuration:
- Button
- Checkbox
- Choice group
- Dropdown
- Horizontal rule
- Label
- Link
- Slider
- Textbox
- Multi-line Textbox
- Toggle
- Custom
Download
The above project can be downloaded from here.
Summary
Thus, in this article – we have learned the below with respect to adding the custom property in the SPFx web part property pane:
- How to create create a custom property pane field?
- What is the SharePoint framework custom property pane?
- What are the field types are supported in the web part property pane?
See Also
- 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
3 comments on “Create custom property in SharePoint Framework – SPFx web part pane”
You must log in to post a comment.