SharePoint Framework Property Controls

Developers have started use of SharePoint framework for developing the client side web parts in SharePoint online(Office 365). Some of the code block is getting repeated across multiple client side web parts like selecting the list, date time selection, color picker, term set picker. Developers have noticed this to the PNP community. Hence Microsoft came up with reusable controls which are similar to our ASP.net concept of user controls. This controls can be added to the web part easily and can be used as custom property in property pane. I didn't find all steps in single blog so decided to summaries here starting from creating the client side web parts.

Step 1 : Set up your development environment by following steps.

Step 2 :  Build your SharePoint Client side web part

Step 3 : Install the following dependency to your project

Make sure that node.js command prompt is running and it is referring to your project. Execute the below command.

npm install @pnp/spfx-property-controls --save --save-exact

 Step 4 : Update the configuration file of your project

Go to Config folder, under that open config.json file and add the following line to the localizedresource property.

"PropertyControlStrings": "./node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"

"localizedResources": {

    "CustomucwebpartWebPartStrings": "lib/webparts/customucwebpart/loc/{locale}.js",

    "PropertyControlStrings": "./node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"

  }

Step 5 : Adding control to your web part

There are around 6 controls currently available.

1. PropertyFieldColorPicker
2. PropertyFieldDateTimePicker
3. PropertyFieldListPicker
4. PropertyFieldPeoplePicker
5. PropertyFieldSpinButton
6. PropertyFieldTermPicker

we will use PropertyFieldColorPicker control. Import the following module to your web part file.

import { 

  PropertyFieldColorPicker, 

  PropertyFieldColorPickerStyle 

} from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';

Add the new property in web part name it color of type string

export interface ICustomucwebpartWebPartProps {

  description: string;

  color: string; 

}

Add the custom property control to the group fields of the web part property configuration.

 PropertyFieldColorPicker('color', {

                  label: 'Color',

                  selectedColor: this.properties.color,

                  onPropertyChange: this.onPropertyPaneFieldChanged,

                  properties: this.properties,

                  disabled: false,

                  alphaSliderHidden: false,

                  style: PropertyFieldColorPickerStyle.Full,

                  iconName: 'Precipitation',

                  key: 'colorFieldId'

                })   

To test the web part, display the property value in Render method.

 <p class="${ styles.description }">${escape(this.properties.color)}</p>      

Now run the gulp serve to test property locally.

Add the web part on workbench page then click on edit and in property pane you will see the color property with color picker option available. You can select the color and same value will be displayed in the web part body.

Enjoy coding !!!

Reference:

SharePoint framework property control