How to do conditional formatting on the SharePoint List field values using SPFx - Field Customizer?

Question

How to do conditional formatting on the SharePoint List field values using SPFx - Field Customizer?

Answer 1

SharePoint Framework Field Customizer extensions enable you to customize the format of the field data in SharePoint lists. The Field Customizer is more powerful because you can use it to write any code that you want to control how a field 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. enter image description here

Let’s assume we have a list with four fields Title, Status, SLA Met? and Overdue Hours. The title is the default column. Status Column is a choice field and has the following values Open, InProgress, Pending, Rejected, Completed, and Closed. SLA Met? column is a Yes/No field and Overdue Hours is a Number field. My requirement was we want to display the Status column value in view form as Status value + Overdue Hours whose SLA Met? is Yes and if Overdue Hours is more than or equal to 48 Hrs then display it like days. Also, display the Status cell with colors based on each Status value.

Solution:

Open the Node.js Command Prompt

Step-1: Create a new project directory in your favorite location. md field-extension

Step-2: Go to the project directory. cd field-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? field-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 to create? Extension

Step-7: Which type of client-side extension to 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

At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the DataSupplier extension. This might take a few minutes.

Step-11: Type the following into the console to start Visual Studio Code. Code.

Step 12: Within Visual Studio Code, open the ./config/serve.json file.

Set the InternalFieldName attribute to Status for the field name, which we created. Update the pageUrl attributes to match a URL of the list. After the changes, your serve.json should look like the following code:

enter image description here

Step-13: Open the .../src\extensions\dataSupplier\DataSupplierFieldCustomizer.ts file.

Here we are using ListItemAccessor class for accessing the list items of the rendered status column. So, we should import the class from the sp-listview-extensibility package.

import { BaseFieldCustomizer, IFieldCustomizerCellEventParameters, ListItemAccessor } 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.

@override public onRenderCell(event: IFieldCustomizerCellEventParameters): void { // Use this method to perform your custom cell rendering.

let sLADueHours=this._getSLAValue(event.listItem);
switch(event.fieldValue){
  case 'Open':
    event.domElement.parentElement.style.backgroundColor=`#ffb6c1`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;
  case  'InProgress':
    event.domElement.parentElement.style.backgroundColor=`#90ee90`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;
  case  'Pending':
    event.domElement.parentElement.style.backgroundColor=`#cabbbb`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;
  case  'Rejected':
    event.domElement.parentElement.style.backgroundColor=`#f08080`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;
  case  'Completed':
    event.domElement.parentElement.style.backgroundColor=`#7fffd4`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;
  case  'Closed':
    event.domElement.parentElement.style.backgroundColor=`#abff2e`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;                                    
}
}
private _getSLAValue(event: ListItemAccessor): any{
let sLAHours: string=``;
let isSLAMet: string=event.getValueByName('SLAMet_x003f_');
const overDueHoursValue: number=event.getValueByName('OverDueHours');
console.log(isSLAMet);
if(isSLAMet=='Yes'){
  if(overDueHoursValue>=48)
  {
    console.log(Number(overDueHoursValue/24).toFixed(2));
    sLAHours=`( ` + Number(overDueHoursValue/24).toFixed(2) + ` Days )` ;
  }
  else{
    sLAHours=`( ` + Number(overDueHoursValue).toFixed(2) + ` Hours )` ;
  }
}
return sLAHours;
}

Step-14: Build your code in 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 serve.json file.

Step-16: Accept the loading of debugging manifests by selecting Load to debug scripts when prompted.

enter image description here

Now we can see the changes in the list view as shown below.

enter image description here