SharePoint Framework (SPFx) - Field Value Conditional Formatting Using Field Customizer Extension


SharePoint Framework Field Customizer extensions enable us to customize the format of field data in SharePoint lists. The Field Customizer is more powerful than Column Formatting using Json because we can use it to write any code that we want, in order to control how field data is displayed.
Here, I give you a quick and simple example to render a Status field value based on conditional formatting on field values SLA Met and Overdue Hours using SPFx Field Customizer.
Let’s assume we have a list with four fields Title, Status, SLA Met? and Overdue Hours. 'Title' is the default column. The status column is a choice field and has the following values Open, InProgress, Pending, Rejected, Completed, and Closed. The 'SLA Met?' column is a Yes/No field and the 'Overdue Hours' column is a Number field.
My requirement was that we want to display the Status column value in view form as Status value + Overdue Hours whose 'SLA Met?' column is Yes, and 'Overdue Hours' column is more than or equal to 48 Hrs then display it in days. Also, we want to display the Status cell with colors based on each Status value.


Open the Node.js Command Prompt and follow the below steps to achieve the result.
Step 1
Create a new project directory.
md fieldcustomizer-extension
Step 2
Go to the project directory.
cd fieldcustomizer-extension
Step 3
Create a new DataSupplier extension by running the Yeoman SharePoint Generator.
yo @microsoft/sharepoint
When prompted, enter the following values (select the default option for all prompts omitted below)
Step 4
What is your solution name? fieldcustomizer-extension
Step 5
Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? (y/n) n
Step 6
Which type of client-side component should be created? Extension
Step 7
Which type of client-side extension should we create? Field Customizer
Step 8
What is your Field Customizer name? DataSupplier
Step 9
What is your Field Customizer description? DataSupplier description
Step 10
Which framework would you like to use? No JavaScript Framework
Yeoman will install the required dependencies and scaffolds the solution files along with the DataSupplier extension. This might take a few minutes.
Step 11
Open the Visual Studio Code using the below command. 
code .
Step 12
Within Visual Studio Code, open the ./config/serve.json file.
Update the InternalFieldName attribute to Status for the field name. Update the pageUrl attributes to match a URL of the list. Once the changes are done, the serve.json will look like the screenshot below.
Step 13
Open the .../src\extensions\dataSupplier\DataSupplierFieldCustomizer.ts file.
Here, we are using ListItemAccessor class for accessing the list items of rendered status column. So, we should import the class from sp-listview-extensibility package.
  1. import {  
  2.     BaseFieldCustomizer,  
  3.     IFieldCustomizerCellEventParameters,  
  4.     ListItemAccessor  
  5. } from '@microsoft/sp-listview-extensibility';  
The following are the content of OnRendercell() methods in the solution. Also, we are calling a new function from OnRenderCell() method named _getSLAValue() to check the Overdue Hours.
  1. @override  
  2. public onRenderCell(event: IFieldCustomizerCellEventParameters): void {  
  3.     // Use this method to perform your custom cell rendering.  
  4.     let sLADueHours = this._getSLAValue(event.listItem);  
  5.     switch (event.fieldValue) {  
  6.         case 'Open':  
  7.    = `#ffb6c1`;  
  8.             event.domElement.innerHTML = `<div>${event.fieldValue} ${sLADueHours}</div>`;  
  9.             break;  
  10.         case 'InProgress':  
  11.    = `#90ee90`;  
  12.             event.domElement.innerHTML = `<div>${event.fieldValue} ${sLADueHours}</div>`;  
  13.             break;  
  14.         case 'Pending':  
  15.    = `#cabbbb`;  
  16.             event.domElement.innerHTML = `<div>${event.fieldValue} ${sLADueHours}</div>`;  
  17.             break;  
  18.         case 'Rejected':  
  19.    = `#f08080`;  
  20.             event.domElement.innerHTML = `<div>${event.fieldValue} ${sLADueHours}</div>`;  
  21.             break;  
  22.         case 'Completed':  
  23.    = `#7fffd4`;  
  24.             event.domElement.innerHTML = `<div>${event.fieldValue} ${sLADueHours}</div>`;  
  25.             break;  
  26.         case 'Closed':  
  27.    = `#abff2e`;  
  28.             event.domElement.innerHTML = `<div>${event.fieldValue} ${sLADueHours}</div>`;  
  29.             break;  
  30.     }  
  31. }  
  32. private _getSLAValue(event: ListItemAccessor): any {  
  33.     let sLAHours: string = ``;  
  34.     let isSLAMet: string = event.getValueByName('SLAMet_x003f_');  
  35.     const overDueHoursValue: number = event.getValueByName('OverDueHours');  
  36.     console.log(isSLAMet);  
  37.     if (isSLAMet == 'Yes') {  
  38.         if (overDueHoursValue >= 48) {  
  39.             console.log(Number(overDueHoursValue / 24).toFixed(2));  
  40.             sLAHours = `( ` + Number(overDueHoursValue / 24).toFixed(2) + ` Days )`;  
  41.         } else {  
  42.             sLAHours = `( ` + Number(overDueHoursValue).toFixed(2) + ` Hours )`;  
  43.         }  
  44.     }  
  45.     return sLAHours;  
  46. }  
Step 14
Build your code in the Node.js command prompt.
gulp build
Step 15
Compile your code by running this command:
gulp serve
This will start your default browser and load the page defined in the serve.json file.
Step 16
Accept the loading of the debug manifests by selecting Load debug scripts when prompted.
Now we can see the changes in the list view, as shown below.