SharePoint Framework Webpart Property Pane Configuration With Custom Properties

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,