custom property pane spfx custom property pane spfx custom property pane spfx

// this is a simple structure of the custom control

private customProp() : IPropertyPaneField{

  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);

        }

      }

    }

  }

}import { IPropertyPaneField, IPropertyPaneCustomFieldProps, PropertyPaneFieldType } from ‘@microsoft/sp-webpart-base’;protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return {

      pages: [

        {

          header: {

            description: strings.PropertyPaneDescription

          },

          groups: [

            {

              groupName: strings.BasicGroupName,

              groupFields: [

                PropertyPaneTextField(‘description’, {

                  label: strings.DescriptionFieldLabel

                }),

                this.customProp()

              ]

            }

          ]

        }

      ]

    };

  }