The Modern SharePoint Framework have a new WebPart Properties pane. The property pane allows end users to configure the web part with a bunch of properties.
The property pane has three key metadata:
- Pages
- Pages provide you the flexibility to separate complex interactions and put them into one or more pages. Pages then contain Header and Groups.
- Header
- Header allows you to define the title of the property pane and Groups let you define the various sections for the property pane through which you want to group your field sets.
- Groups
- A property pane should contain a page, an optional header, and at least one group.
- Property fields are then defined inside a group
- Supported PropertyFileds and Objects
- Label – PropertyPaneLabel
- Textbox – PropertyPaneTextField
- Multi-line Textbox – PropertyPaneTextField
- Checkbox – PropertyPaneCheckbox
- Dropdown – PropertyPaneDropdown
- Link – PropertyPaneLink
- Slider – PropertyPaneSlider
- Toggle – PropertyPaneToggle
- ChoiceGroup – PropertyPaneChoiceGroup
- Button – PropertyPaneButton
- HorizontalRule – PropertyPaneHorizontalRule
- Custom
- Supported PropertyFileds and Objects
In this article I am showing how to use pages,Header, Group,and field in the webpart properties section.
Step 1: Create a new Solution Example: spfx-webpartproperties
- Go to run –> cmd and change folder to where you want to create a new project
- Create new folder md spfx-webpartproperties
- change to new folder cd spfx-webpartproperties
Step 2: Create a new Webpart
- type yo @microsoft/sharepoint and enter
- It will create a new SharePoint Framework Solution
- give new webpart name : spfxpropertypane
Step 3: Using the Property Pane
- Go to Visual Studio code – type code – it will open the visual code window.
Open webpart file SpfxpropertypaneWebpart.ts name see the default – one page,header and description filed in the groups.
protected get propertyPaneSettings(): IPropertyPaneSettings {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField(‘description’, {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
Step 4: In this article I added multiple pages with multiple groups and fields in Webpart Properties window
First Import all the field headers,it looks like below in the top of the webpart page
import {
BaseClientSideWebPart,
IPropertyPaneSettings,
IWebPartContext,
PropertyPaneTextField, // Textbox
PropertyPaneCheckbox,// Checkbox
PropertyPaneLabel,// Label
PropertyPaneLink,//Link
PropertyPaneSlider,//Slider
PropertyPaneToggle,//Toggle
PropertyPaneDropdown //Dropdown
} from ‘@microsoft/sp-client-preview’;
WebPart Property Page 1:
- Create a Page with one group and two fields (Text Box and Multi line Text Box), here I can implement the validation as also
Code:
{ //Page 1
header: {
description: “Page 1 – one group and two fields ”
},
groups: [
{
groupName: “Group one”,
groupFields: [
PropertyPaneTextField(‘name’, {
label: “Name”,
multiline: false,
resizable: false,
onGetErrorMessage: this.simpleTextBoxValidationMethod,
errorMessage: “This is the error message”,
deferredValidationTime: 5000,
placeholder: “Please enter name”,”description”: “This is the Name”
}),
PropertyPaneTextField(‘description’, {
label: “Description”,
multiline: true,
resizable: true,
placeholder: “Please enter description”,”description”: “This is the description”
})
]
}
]
}
SPFx Property Pane
Validation
private simpleTextBoxValidationMethod(value: string): string {
if (value.length < 5) {
return “Name must be more than 5 characters!”;
} else {
return “”;
}
}
SPFx Validation
WebPart Property Page 2:
- Create a Page with two groups and two fields each (Slider, Toggle, dropdown, and Checkbox)
- Code
{ //Page 2
header: {
description: “Page 2 – two groups and two fields each”
},
groups: [
{
groupName: “Group one”,
groupFields: [
PropertyPaneSlider(‘Slider’, {
label:’Slider’,min:1,max:10
}),
PropertyPaneToggle(‘Toggle’, {
label: ”
})
]
},
{
groupName: “Group Two”,
groupFields: [
PropertyPaneDropdown(‘dropdowm’, {
label:’Drop Down’,
options: [
{ key: ‘Item1’, text: ‘Item 1’ },
{ key: ‘Item2’, text: ‘Item 2’ },
{ key: ‘Item3’, text: ‘Item 3’, isSelected: true }
]
}),
PropertyPaneCheckbox(‘checkbox’,
{ text: ‘Yes/No’, isChecked: true, isEnabled: true})
]
}
]
}
WebPart Property Page and two fields (Slider, Toggle, dropdown, and Checkbox)
WebPart Property Page 3:
- Create a Page with one group and two fields (Link, Label and TextBox )
- Code
{ //Page 3
header: {
description: “One group and two fields “
},
groups: [
{
groupName: “Group One”,
groupFields: [
PropertyPaneLink(‘URL’,
{ text:”My Blog”, href:’http://www.jenkinsblogs.com’,target:’_blank’}),
PropertyPaneLabel(‘label’,
{ text:’Please Enter designation’,required:true}),
PropertyPaneTextField(‘textbox’,{})
]
}
]
}
SPFx Property Pane and two fields (Link, Label and TextBox )
We can easily add the different controls in the WebPart properties,also we can add custom controls, I will explain how to add custom control in webpart properties in next article.
Step 5: How to use webpart properties values in the webpart.
- Open ISpfxpropertypaneWebPartProps.ts file, you can able to see the default description property
- Add the properties based on the control name
- I have added all property names here
export interface ISpfxpropertypaneWebPartProps {
name: string;
description: string;
Slider:string;
Toggle:string;
dropdowm:string;
checkbox:string;
URL:string;
textbox:string;
}
Webpart properties values in the webpart
Output below
So that’s it, we can add a web part property controls
The web part property model in SPFx is quite powerful and extraordinary.
About the Author:
N.S. Jenkins is a SharePoint Architect with 13+ years experience in designing and developing enterprise applications involving n-tier architecture in Microsoft technology. Check him out at jenkinsblogs.com or connect on twitter.
