How To Use PropertyFieldCollectionData In SPFx Property Pane


With the introduction of the SharePoint Framework (SPFx) ,  front end development has become very easy and hosting of the webpart is taken care of by SharePoint, which does not require an additional server. So the use of SPFx is growing exponentially and the best part of SPFx webparts is they are easy to configure.
To Configure SPFx web part we have Property Pane which opens up in a panel and we can add any controls as per our need. Out of the box SPFx has given us many controls but there are a few controls which are not available. To tackle this we have the PnP Community which takes care of creating reusable property pane controls. To check all the property pane controls check the link.
Let us look into one of the controls which is very helpful if we want to fetch the data in SPFx configuration. This control is known as PropertyFieldCollectionData. To check the complete documentation go to this link.
Types of Fields which we can create in PropertyFieldCollectionData
 Type  Description
 string  This will create a text field to store the string value
 number  This will be a text field which accepts only number value
 Boolean  This will create a checkbox which can store a Boolean value
 dropdown  This will create dropdown fields where we can specify options value
 fabricIcon  This will create an icon
 Url  This will create a URL field
 custom  This gives control for custom rendering of the field
In this article, we will cover the step by step process of how to use this control in our SPFx Project.
Step 1- Create a SPFx solution and webpart
Run the below sequence of commands in the command prompt or nodejs command prompt.
Below command will be used to create a folder
  1. md PnPPropertyFieldCollectionData    
  2. cd PnPPropertyFieldCollectionData   
Let us now create the SPFx project in the above-created folder.
  1. yo @microsoft/sharepoint  
How To Use PropertyFieldCollectionData In SPFx Property Pane
Now let us install the required npm package to use PnP Property pane control.
  1. npm install @pnp/spfx-property-controls  
  2. npm install @pnp/spfx-controls-react --save --save-exact  
Step 2 - Update the code
Open the PnpPropertyFieldCollectionDataWebPart.ts file and add the below code.
Update the import with the below code.
  1. import { PropertyFieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData';   
Add the variable in the property interface, the variable would be of type any[] as it would store collection of data items.
  1. export interface IPnpPropertyFieldCollectionDataWebPartProps {  
  2.   description: string;  
  3.   collectionData: any[];  
  4. }  
We can have many different types of columns for our data collection and if we need to have a custom column as well we can create them.
For the demo we are using string, number, dropdown, Boolean and in the custom field we are using PnP People Picker control.
Add the below code in getPropertyPaneConfiguration() method insides the groups collection.
  1. PropertyFieldCollectionData("collectionData", {  
  2.     key: "collectionData",  
  3.     label: "Collection data",  
  4.     panelHeader: "Collection data panel header",  
  5.     manageBtnLabel: "Manage collection data",  
  6.     value:,  
  7.     fields: [  
  8.         {  
  9.             id: "Title",  
  10.             title: "Firstname",  
  11.             type: CustomCollectionFieldType.string,  
  12.             required: true  
  13.         },  
  14.         {  
  15.             id: "Lastname",  
  16.             title: "Lastname",  
  17.             type: CustomCollectionFieldType.string  
  18.         },  
  19.         {  
  20.             id: "Age",  
  21.             title: "Age",  
  22.             type: CustomCollectionFieldType.number,  
  23.             required: true  
  24.         },  
  25.         {  
  26.             id: "City",  
  27.             title: "Favorite city",  
  28.             type: CustomCollectionFieldType.dropdown,  
  29.             options: [  
  30.                 {  
  31.                     key: "pune",  
  32.                     text: "Pune"  
  33.                 },  
  34.                 {  
  35.                     key: "junagadh",  
  36.                     text: "Junagadh"  
  37.                 }  
  38.             ],  
  39.             required: true  
  40.         },  
  41.         {  
  42.             id: "Sign",  
  43.             title: "Signed",  
  44.             type: CustomCollectionFieldType.boolean  
  45.         }, {  
  46.             id: "customFieldId",  
  47.             title: "People picker",  
  48.             type: CustomCollectionFieldType.custom,  
  49.             onCustomRender: (field, value, onUpdate, item, itemId, onError) => {  
  50.                 return (  
  51.                     React.createElement(PeoplePicker, {  
  52.                         context: this.context,  
  53.                         personSelectionLimit: 1,  
  54.                         showtooltip: true,  
  55.                         key: itemId,  
  56.                         defaultSelectedUsers: [item.customFieldId],  
  57.                         selectedItems: (items: any[]) => {  
  58.                             console.log('Items:', items);  
  59.                             item.customFieldId = items[0].secondaryText;  
  60.                             onUpdate(, items[0].secondaryText);  
  61.                         },  
  62.                         showHiddenInUI: false,  
  63.                         principalTypes: [PrincipalType.User]  
  64.                     }  
  65.                     )  
  66.                 );  
  67.             }  
  68.         }  
  69.     ],  
  70.     disabled: false  
  71. })  
Let us understand the above code,

We are creating six columns for our Data out of which two are of type string  column Title and Lastname.
The age field is of type number,  city field is of type dropdown with values as "Pune" and "Junagadh." Sign is of type boolean and for the custom field, we are using the PnP People picker field for storing user email id.

For the custom field, onCustomRender is the mandatory and important function which indicates which field we would like to display. For storing the data we are using onUpdate function which would update the value of the collection.
Step 3 - Use the data which is added in the property pane
Update the interface with the values as displayed below, 
  1. export interface IPnpPropertyFieldCollectionDataProps {  
  2.   description: string;  
  3.   collectionData: any[];  
  4. }  
Now pass the collected data to the react component to display it in our page.
Update the render method in the .ts file of the web part as displayed below.
  1. public render(): void {  
  2.     const element: React.ReactElement<IPnpPropertyFieldCollectionDataProps> = React.createElement(  
  3.       PnpPropertyFieldCollectionData,  
  4.       {  
  5.         description:,  
  6.         collectionData:  
  7.       }  
  8.     );  
  10.     ReactDom.render(element, this.domElement);  
  11.   }  
Now to display it in the HTML open the .tsx file of the webpart and append the below code in the render method.
  1. <div className={styles.row}>  
  2. {this.props.collectionData && => {  
  3.   return (<div><span>{val.Title}</span><span style={{ marginLeft: 10 }}>{val.Lastname}</span></div>);  
  4. })}  
  5. </div>  
How To Use PropertyFieldCollectionData In SPFx Property Pane
Complete code is available in the below link.


So with PropertyFieldCollectionData control, we can create a complete form with different fields where the data can be stored and can be retrieved. This can be very helpful when we need to use this for configuring email templates and when we want the webpart to have multiple configurations.