The SharePoint Framework webpart can be added on SharePoint modern UI as well as classic. It has a Webpart property pane which allows end users to configure the web part with custom properties. We can add run time inputs using properties.
It has three key metadata: a page, an optional header, and at least one group.
- Page
It contains a header and groups. It provides the flexibility to separate complex interactions and put them into one or more pages.
- Header
It allows you to define the title of the property pane.
- Group
It allows you to define the various sections or fields for the property pane through which you want to group your field sets.
Supported PropertyFields 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
Step -1 Create a new SPfx WebPart
Open node js command promt
- md “your project name”
- cd “your project name”
- yo @microsoft/shrepoint
![SharePoint Framework Webpart Property Pane Configuration With Custom Properties]()
Provide your required details,
Now your webpart is ready to use.
Step 2 - Open in code editor
Open project in any code editor of your choice. I am using Visual Studio code here.
Step 3 - Property Pane Import
Open file SpfxWithPropertyWebPart.ts file, add import PropertyPane Components just below other import statements.
Step 4 - Add properties types
Go to export interface and add all property name with types.
Step 5 - Add Property Pane Configuration
In this example we will add multiple pages with groups in property pane, for that we have to add all pages with properties with the getPropertyPaneConfiguration() method,
Step 6 - Get Properties value in webpart
So far we have added custom properties with our webpart. Now to get property values add them inside the HTML of render.
Save your code and check on workbench.
Property pane page 1 with group name “Personal Details” and properties.
Property pane page 2 with group name “Professional Details” and properties.