SPFx – Using PropertyFieldColumnPicker control

Introduction

Hi friends, as you all aware that the PnP Property Controls has released a new version and there is a new control introduced, which will display the columns of the specified list. You can view the release documention here. Let us examine how we can use the new control and its features

Base project setup & npm packages

Regarding the basic creation of the project and other stuff, please refer to my previous blog post.

I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work.

Used SharePoint Yeoman generator version 1.11.0
Used @pnp/spfx-property-controls version 2.5.0 for the property controls

Let’s start coding

Once the project is created with all the dependencies, add the following imports to the webpart.ts file to use the controls. We have to pass the listid which is mandatory for the Column picker and so we have imported the PropertyFieldListPicker control too.

import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';
import { IColumnReturnProperty, PropertyFieldColumnPicker, PropertyFieldColumnPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldColumnPicker';

Create the property variable to store the property value. Below should be created in the webpart.ts file and also on the webpart.tsx file to access the property for other functionality, but in our case we are just displaying the values.

list: string;
columnSingleID: string;
columnMultipleID: string[];
columnInternalName: string[];

list – To store the list id, the same has to be passed to the Column picker control

columnSingleID – To store the Column picker value (Single selection with ID as the return value)

columnMultipleID – To store the Column picker value (Multiple selection with ID as the return value)

columnInternalName – To store the Column picker value (Multiple selection with Internal Name as the return value)

Declare the properties in the getPropertyPaneConfiguration() method
The below code is to declare the property control for selecting the list.

PropertyFieldListPicker('list', {
    label: 'Select a list',
    selectedList: this.properties.list,
    includeHidden: false,
    orderBy: PropertyFieldListPickerOrderBy.Title,
    disabled: false,
    onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
    properties: this.properties,
    context: this.context,
    onGetErrorMessage: null,
    deferredValidationTime: 0,
    key: 'listPickerFieldId'
})

The below code is to capture the selected column ID.

PropertyFieldColumnPicker('columnSingleID', {
    label: 'Select a single column',
    context: this.context,
    selectedColumn: this.properties.columnSingleID,
    listId: this.properties.list,
    disabled: false,
    orderBy: PropertyFieldColumnPickerOrderBy.Title,
    onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
    properties: this.properties,
    onGetErrorMessage: null,
    deferredValidationTime: 0,
    key: 'columnSingleTitlePickerFieldId',
    displayHiddenColumns: false,
    columnReturnProperty: IColumnReturnProperty.Id
})

The below code is to capture multiple selected column’s ID

PropertyFieldColumnPicker('columnMultipleID', {
    label: 'Select columns which will return title',
    context: this.context,
    selectedColumn: this.properties.columnMultipleID,
    listId: this.properties.list,
    disabled: false,
    orderBy: PropertyFieldColumnPickerOrderBy.Title,
    onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
    properties: this.properties,
    onGetErrorMessage: null,
    deferredValidationTime: 0,
    key: 'multiColumntitlePickerFieldId',
    displayHiddenColumns: false,
    columnReturnProperty: IColumnReturnProperty.Id,
    multiSelect: true
})

The below code is to capture multiple selected column’s Internal Name

PropertyFieldColumnPicker('columnInternalName', {
    label: 'Select columns which will return internal names',
    context: this.context,
    selectedColumn: this.properties.columnInternalName,
    listId: this.properties.list,
    disabled: false,
    orderBy: PropertyFieldColumnPickerOrderBy.Title,
    onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
    properties: this.properties,
    onGetErrorMessage: null,
    deferredValidationTime: 0,
    key: 'multiColumninternalnamePickerFieldId',
    displayHiddenColumns: false,
    columnReturnProperty: IColumnReturnProperty['Internal Name'],
    multiSelect: true
})

Note: The main difference between the other controls is the property named columnReturnProperty which is used to return either Id or Title or Internal Name of the selected column(s). Click here to go through the documentation.

What’s Next?

As you can see, using Property Field controls are simple. PnP team and the contributors had done a great job providing all the functional controls in a user friendly way. All the boiler plate codes are already writted for you. Try the PropertyField controls now.

Dont forget to grab the sample code – Property Fields demo

Happy Coding…