Conditional formatting based hex code as a field value

Help Center Get Answers
1

Hi,

I want to be able to have a field value as a hex code and the field (in a table) show that colour.
Use Case: On a CRM app when a new client is won the user asssigns a colour by putting a hex code in a field in the client object. Then on various tables this hex code field can be shown as a column and the cell background colour shows that code’s colour.

I know this can be easily done by conditional formatting in the back end but I need it to be user led, rather than them coming to me every time they win a new client.

Any whizz kids out there have the answer?
Thanks

2

How comfortable are you with using custom code option for this? You can use a simple function like the following:

var changeColumnColour = function (view_id, color_field_id) {
    $(`#${view_id}`).find("table > tbody > tr").each(function () {
        let hexCode = $(this).find(`.${color_field_id}`).text().trim();
        $(this).find("td").each(function () {
            $(this).css("background-color", hexCode);
        });
    });
}

$(document).on('knack-records-render.view_n', function (event, view, records) {
    changeColumnColour(view.key, "field_x");
});
3

Hi Arjun,
thanks for the follow-up! I actually got a solution via another colleague, this is the JS:

$(document).on(‘knack-view-render.view_263’, function(event, view, data) {
const tableColumn = 1; //change this to choose the coloured column
//$(“td.field_475, th.field_475”).hide(); // use to hide hex column or comment out
var dataPosition = 0; // start data counter
var tablePosition = 1; // start row counter
let tableLength = data.length;
while (dataPosition < tableLength) { // loop through table rows
console.log(dataPosition);
console.log(tableLength);
console.log($(“#view_263 tbody tr:nth-child(” + tablePosition + “)”));
if ($(“#view_263 tbody tr:nth-child(” + tablePosition + “)”)[0].hasAttribute(‘class’) === false) {
$(“#view_263 tbody tr:nth-child(” + tablePosition + “) td:nth-child(” + tableColumn + “)”).attr(“style”, “background-color:” + data[dataPosition].field_475_raw + “;”);
dataPosition++;
}
tablePosition++;
}
});

Thanks a lot though!