Dynamic Font Color Change in List Control Based on Field Value Updates

Forms SharePoint 2019
1

Hi,

I am using a list control and have a case where I need to set the font color to red if a field has a specific value. After the value is changed inline, I need to provide an indication to the user that this value has been modified. For example, I would like to set the font color to blue. The list contains multiple fields, and any of them could be changed. How can I achieve this scenario dynamically?

Many thanks,
George

2

Dear @george,
The example with a specific value should be very straightforward, you can just check for the value and set the font color to red if it matches the condition, we have similar example with a date field here - Customize view of columns in List or Library — Plumsail SharePoint Forms Documentation

Changing value to blue if it was changed, now that's a bit trickier. I can imagine storing original value in user's browser storage, and comparing to that, but if user refreshes the page, new value will become original as it would overwrite the previous one. You could send a request to get version history and compare it with the previous one, but that would quickly get very complex.

3

Hi Nikita,

How I can check the fields dynamically. I don't see any reference in the documentation.

Thanks,
George

4

Dear @george,
The documentation is about customizing templates for specific columns, so you can customize their appearance (while they are not being edited) based on certain conditions.

For example, let's say I want to highlight column with Status: Overdue with red color, I would write the following template:

const value = ctx.row.Status;
if (!value) {
    return '';
}
return value == 'Overdue'
    ? `<span style="color:red">${value}</span>`
    : `<span>${value}</span>`;

image
image764×298 11.1 KB

In this case, it's a simple Single Line Text field, but it works:

image
image286×269 2.68 KB

5

Hi Nikita,

That's clear to me. My case is a bit different though. I have a grid with many columns and any of them can contain say the word "Overdue". I want to iterate all the fields and if any of them includes the "Overdue" then change the colour to red. I don't want to check all the fields one by one as I have 3 content types with 20 fields each. Hopefully it makes sense.

Thanks,
George

6

Dear @george,
Try the following approach then:

image
image381×289 4.14 KB

fd.spRendered(() => {
    let listOrLibrary = fd.control('ListOrLibrary1');
    listOrLibrary.ready(() => {
        // Get all defined field names
        const fieldNames = listOrLibrary.widget.columns
          .map(column => column.realFieldName)
          .filter(fieldName => fieldName !== undefined);
        
        // Create templates object dynamically
        const templates = {};
        fieldNames.forEach(fieldName => {
            templates[fieldName] = ctx => {
                const value = ctx.row[fieldName];
                if (value && value.toString().includes('Test')) {
                    return '<span style="color:red">' + value + '</span>';
                }
                return '<span>' + value + '</span>';
            };
        });
        
        // Apply templates to the control
        listOrLibrary.templates = templates;
    });
});
7

This works perfectly! thank you!

1 Like