Custom Control for Property Pane in SharePoint Framework (SPFx) Solution

Hi Friends,

In today's blog I will be explaining how to create a custom control for Property pane in SharePoint Framework,



Many times we need a functionality which we cannot be fulfilled using the OOB (out-of-box) controls. For which we have to go with the customized solution. A very basic need that I encountered and will showcase in this blog is the display of colored text with some sort of icon in the Property Pane.

For this we can use label but you cannot change the color of the text and there is no property to handle the icon class as well or you cannot add custom css based on the logic. So to demonstrate and understand how the custom control can be created and functions in Property pane of a SharePoint Framework solution.

To implement this functionality I will be extending the properties of a Label and adding some more properties to achieve the functionality.

Let's start with the structure and it's explanation then we'll move through the code inside it.


So as per the structure (and should be) I have created the custom control inside the /src/controls/PropertyPaneLabelCustom. So all the controls should be placed under the /src/controls/ folder.

/controls/


  • /components(folder): This contains the main component files which includes the control and related property files
    • /ILabelCustomProps.ts: This file declares the interface of the property required by the custom control
    • /LabelCustom.tsx: This file contains the react component which will be our custom control in the property pane
  • /IPropertyPaneLabelCustomInternalProps.ts: This class is extended by the IPropertyPaneCustomFieldProps and the control Property class, in my case ILabelCustomProps, so that all the necessary properties are implemented which is required by both the classes
  • /IPropertyPaneLabelCustomProps.ts: This class contains the same properties as in the Controls props i.e.. ILabelCustomProps.ts
  • /PropertyPaneLabelCustom.ts: This class passes on the information/values to the actual control.

Let's dive into the code files.



Usage

  • Import the control using 
import { PropertyPaneLabelCustom } from './../../controls/PropertyPaneLabelCustom/PropertyPaneLabelCustom';
  • Use the control in the method: getPropertyPaneConfiguration()

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                new PropertyPaneLabelCustom('label', {
                  className: `${ColorClassNames.green}`,
                  iconClass: ColorClassNames.green,
                  iconName: "CompletedSolid",
                  text: `Message from Custom Control in green color`
                })
              ]
            }
          ]
        }
      ]
    };
  }

So as configured in above configuration I have provided a green color text with icon (as shown in pic below)



Happy Coding
Sumit Kanchan
#SharePointFramework #SharePointWidgets

Comments

Popular posts from this blog

Rename Folder using Microsoft Flow / Power Automate in a Document Library in SharePoint Online

Power Automate: How to Add "New Line" to the text in SharePoint multiline text field

How to resolve certificate issue in SharePoint Framework Solution