Adding Custom Properties To SPFx Web Part Properties Pane - Part One


In this article, you will learn the basics of creating a custom pane property definition. This helps with adding pane properties to the web part property panes using web part files.

In my previous articles, you can learn about adding existing properties to SPFx web part properties pane.

So far, you have seen only adding/using property templates available on open source. Now, you will learn developing and inserting custom pane properties to the properties pane.

The custom field property declared in the web part file (under getPropertyPaneConfiguration method) contains target property name and other custom properties.

  1. PropertyFieldMessageBar('targetpropname', customprops)  

In the below sections, you will see in detail about the pane property definition for the custom pane property declared above.

Interfaces Available

Microsoft provides two interfaces for creating custom property.

This interface provides key properties and methods that help in developing the pane property. Properties and methods available are the following.

a. context

b. key

c. onDispose() and 

d. onRender()

This interface provides a few properties that can be inherited for defining the custom pane property (fields).

a. properties