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

Introduction 

 

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.

 

Solution

 

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.

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 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.