Building Custom Property for PropertyPane in SPFx

Working with SharePoint PropertyPane can be a cumbersome task as we only have a handful of controls which can be used. After struggling for a month, I decided to create several re-usable controls for ProperyPane.

Here is the link to git repo where i’ll be adding more custom properties for PropertyPane https://github.com/anchit1501/spfx-propertypane-controls

ColorPicker is one of the easiest control which helped me with deeper understanding of how controls work in SharePoint PropertyPane.

Image for post
Image for post

Let’s start by creating a HelloWorld webpart where we will create and integrate our ColorPicker and use it to control color in our webpart.

Image for post
Image for post
Folder Structure

Now we need to create a .tsx file where we will be adding our UI and functionality for ColorPicker. It is going to be a class component which will will receive arguments for props and states.

We will use State to manage Callout and color in our ColorPicker control. Whereas props will be used to pass values and functionality into our webpart.

Now declare the props and states outside our class

Let us now import few things which we will be using in our property.

I am using office-ui-fabric ColorPicker and integrating it with Callout to give it a popup experience.

It’s time to create functions which will handle the Callout’s visibility and handle the color change.

Initialize the constructor and bind our functions in it, also declare the state in which we will set initial values for color and isCalloutVisible.

Let’s add a little css to our ColorPicker. We are going to put this inside render method

Now we will add the HTML for our property. Create a div which will act as a button for opening Callout which contains ColorPicker. Bind the setCalloutVisible with onClick function on div which will display the Callout.

We also need to bind colorChanged function to update the state and dismissCallout function to dismiss the Callout.

We are done with our UI and internal functionality of out property. Now we need create an interface which will bind our property with webpart where we intent to use it.

Create a new .ts file for passing our property as a control to the webpart’s PropertyPane.

The main purpose of this file to export our custom code as a property for our Propertypane.

Props declared inside ColorPickerControlInternalProps will be used to pass values between webpart and property and the constructor is responsible for binding properties with our webpart.

Our ColorPicker is now ready. We just need to add it in our webpart and test it out.

Open webpart.manifest.json where you want to use the property and add a default value for the color.

Let’s import our newly created property by importing its .ts file in our HelloWorldWebPart.ts

Add our property’s props(color,onColorChanged) in WebpartProps to build a two-way connection with our property.

Create a property which will pass value fromHwebpart’s property pane to the webpart as shown below.

Add the same to your webpart’s props file

Declare onColorChange function which will update our property for the webpart.

Add your newly created property in PropertyPaneConfiguration

Our Custom Property is bound with HelloWorld webpart. Let’s test it out by using it.

Open HelloWorld.tsx and link the property however you want. I am using it to change background color.

Now run the code.

Here is how our webpart will look with our porperty in PropertyPane.

Image for post
Image for post
Screenshot of WebPart after adding property

You can use this method to create your own custom property in accordance to your needs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store