Customizing SharePoint Framework Web Part Properties - Part Three

Updated: Apr 30, 2019


In this article, you will learn how to manage multiple pages on the SharePoint Framework web part "Properties" pane. You will also see different fields or properties getting appended to the Properties pane.

In my previous articles, I have introduced the custom properties and explained check box field properties sample on SharePoint Framework (SPFx) web part.

In my SPFx article series, you can learn about SPFx introduction, prerequisites, steps for setting up the environment, and developing and testing the web parts using the local environments.

In the previous article sample, you will have seen descriptions and check box fields added to the properties pane on a single page. Here you can see them separated on multiple pages. I will be using the samples from the previous article.

In this sample, the web part property pane contains two pages. 

  • The first page contains the text and label fields.

  • The second page contains the check box fields. 


propertyPaneSettings method holds the basic pane structure where it defines the basic definition for the web part properties. Basically, in the property definition file, pane page contains the following components.

  • Header Contains the description property about the page.

  • Groups Multiple groups with each group having multiple properties.

  • Group Contains the group name and the properties. The properties can be anything like label, description, check box, drop down, etc. 


In the first page of property pane, let us show two groups. 

  • The first group contains a set of text field properties.

  • The second group contains the label property, which shows the static text. 

In the second page of property pane, let us define one group.