In index view, I want to change border of a record to red if it reaches a threshold

1

Question / Problem

I want to add an CSS customization for the index view, so that when a NUMBER field of a record reaches a dangerous level, the record border will turn red. How could I do that?

Current Situation

My app looks like the below image:

image
image1282×126 11.6 KB

I try to use getFieldElement but no use. I'm stuck on how to get the right record element.

2

Hello @myroad2pro ,

Welcome to the community!

Here’s a sample script that should do the trick.
In this script, any row where the 'Stock Quantity' field has a value of 10 or more will be highlighted in red.

I hope this helps:

20241202
202412022572×264 11.1 KB

(function() {
    'use strict';

    const stockFieldCode = 'Stock'; // Ensure this is the correct field code

    function highlightRows(event) {
        const records = event.records;
        if (!records || records.length === 0) {
            return event;
        }

        records.forEach((record, index) => {
            const stockField = record[stockFieldCode];
            const stockValue = stockField ? parseFloat(stockField.value) : undefined;

            const rowElements = document.querySelectorAll('.recordlist-row-gaia');
            if (!rowElements || !rowElements[index]) {
                return;
            }

            const rowElement = rowElements[index];

            // Highlight row red if stock value >= 10
            if (stockValue >= 10) {
                rowElement.style.backgroundColor = 'red';
                rowElement.style.color = 'white'; // Adjust text color for readability
            }
        });

        return event;
    }

    // Attach the script to the record list page
    kintone.events.on('app.record.index.show', highlightRows);
})();
3

Thank you so much @Chris
I will try to adapt into my code.