By 30,520 total views, 6 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
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:
3 comments on “Create custom property in SharePoint Framework – SPFx web part pane”
You must log in to post a comment.