Browse form - change color based on its value

[yvesf]

Hello,

I would like to change color value in a browse form as following :
High Priority --> cell should be red
Medium Priority --> cell should be orange
Low Priority --> celle should be green
Those values are in the first column.

This javascript behind the custom form doesn't work :

Code: Select all

$(document).ready(function() {
    // Loop through each row in the browse view
    $('.nuBrowseCell').each(function() {
        // Get the cell's text or value
        let cellValue = $(this).text().trim();

        // Apply conditional formatting
        if (cellValue === 'High Priority') {
            $(this).css('background-color', 'red'); // Change cell color to red
            $(this).css('color', 'white');         // Change text color to white
        } else if (cellValue === 'Medium Priority') {
            $(this).css('background-color', 'orange');
        } else if (cellValue === 'Low Priority') {
            $(this).css('background-color', 'green');
        }
    });
});

If you could explain how to implement that in nubuilder ..
Thx

Yves

[kev1n]

Hi Yves,

Give this a go:

Code: Select all

$('[data-nu-column="0"]').each(function () {
  // 0 = first column, 1 = 2nd column etc..

  let cellValue = $(this).text().trim();
  let rowNum = $(this).attr("data-nu-row");

  // Define formatting logic in an object
  const formattingRules = {
    "High Priority": { backgroundColor: "red", textColor: "white" },
    "Medium Priority": { backgroundColor: "orange" },
    "Low Priority": { backgroundColor: "green" },
  };

  // Retrieve formatting based on cell value
  const formatting = formattingRules[cellValue];

  if (formatting) {
    const rowSelector = $("div[id^='nucell_" + rowNum);
    rowSelector.css("background-color", formatting.backgroundColor);
    if (formatting.textColor) {
      rowSelector.css("color", formatting.textColor);
    }
  }
});

[yvesf]

Hi Kevin,

I have put your code behind custom code of the form in browse section. Is it the place to implement this script as I have no effect on the ui.
Many thx,

Yves

[yvesf]

that 's working ... sorry I have an hidden column