SPFx Field Customizer Example

To become an SPFx developer, you should understand SPFx field customizers. I will explain here what a field customizer in the SharePoint framework is and how to create and deploy a spfx field customizer into SharePoint Online.

Table of Contents:

What is a Field Customizer Extension in the SharePoint Framework (SPFx)?

A Field Customizer Extension in SharePoint Framework (SPFx) lets you customize how columns appear and behave in SharePoint lists or libraries. You can adjust how data appears or add interactive features to improve the user experience without changing the actual data.

Here, I have a SharePoint Online list with a column named “PerformanceScore.” I have added an SPFx field customizer to change the way the field looks below.

Now, let us do an example of a field customizer in SPFx.

Create SPFx Field Customizer Extension

Now, we will see how to create a field customizer extension in SPFx.

Check out this step-by-step tutorial if you have not yet set up the development environment.

Here, we see how we can achieve the above example.

Before starting the SPFx field customizer extension, you must have the same SharePoint list as the one shown below. If you have a different list, you must make some small changes to the code.

Open the Node.js command prompt and create a directory using the following command:

md PerformanceScoreCustomizer

Navigate to that directory using the following command:

cd PerformanceScoreCustomizer

To create an Extensions, we need to run Yeoman SharePoint Generator using the following command:

yo @microsoft/sharepoint

The Yeoman generator will guide you through a series of questions about the solution you want to create. Like below:

What is the name of your solution? You can enter your solution name here. For example, I am naming mine ‘PerformanceScoreCustomizer.’
Which type of client-side component to create? Choose Extension.
Which type of client-side extension to create? Choose Field Customizer.
What is your Application Customizer name? You can enter your Application name. For example, I am naming mine ‘PerformanceScore.’
Which template would you like to use? Choose No framework

After creating the project, it will take some time to complete. Once finished, you should see a success message like this:

Next, you need to open this folder in VS code using the below command:

Code .

Then, the VS Code automatically opens with these files.

Build your first Field Customizer extension

Now, in the Visual Studio Code, go to the src/extensions/PerformanceScoreFieldCustomizer.ts file. Here, we need to write our code.

Now follow the below steps:

1. First, we import the necessary modules and classes for building SharePoint Framework (SPFx) extensions that are not automatically included by the Yeoman generator when creating a Field Customizer Extension.

import { Log } from '@microsoft/sp-core-library';
import {
  BaseFieldCustomizer,
  type IFieldCustomizerCellEventParameters
} from '@microsoft/sp-listview-extensibility';

import * as strings from 'PerformanceScoreFieldCustomizerStrings';
import styles from './PerformanceScoreFieldCustomizer.module.scss';