SPFx - PropertyPane Custom Controls

This is an example of how to build a custom control for the Property Pane. In this case, a number picker.

In this project, I use the helloworld template (non-react). As an introduction, I show how to build a simple control in a very quick way.

Go to the main .ts file of the helloworld project and add this imports:

       
import { IPropertyPaneField, IPropertyPaneCustomFieldProps, PropertyPaneFieldType } from '@microsoft/sp-webpart-base';
       

then, just add the following function above the propertypane configuration

      
// this is a simple structure of the custom control
private customProp() : IPropertyPaneField<IPropertyPaneCustomFieldProps>{
  return {
    targetProperty : "myTargetProperty",
    type : PropertyPaneFieldType.Custom,
    properties: {
      key: "myCustomProp",
      onRender: (element:HTMLElement, context:any, changeCallback:(targetProperty:string, newValue:any)=>void)=>{
        // draw your control here by replacing the element's html. Add logics to change the property and use the callback
        let currentValue : number = this.properties["myTargetProperty"] || 0;
        element.innerHTML = "click me: " + currentValue;
        element.onclick = ()=>{
          let newValue : number = currentValue + 1;
          changeCallback("myTargetProperty", newValue);
        }                 
      }
    }
  }
}

The onRender function is where you access the HTML element of your control. The myTargetProperty string will be the name of your property and you can choose anything that is unique for the key. Here, I called it "myCustomProp".

Note: If you use react, you should have access to the element's react component inside the onRender function, instead of this HTMLElement.

Finally, you call the customProp on the PropertyPaneConfiguration.

  
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                this.customProp()               
              ]
            }
          ]
        }
      ]
    };
  }

Now, just run gulp serve and you should see your custom html when you open the property pane.

At this point, you can implement all the logics inside the onRender function. You have access to the properties object so you can change it's values. However, this is not the right way to do it. I just made this approach to be easier to understand how it works. In the next page of this article, I will build the custom property control as a reusable module, in a separate project.

Next