Add color to a specific field value in a view - JavaScript isn't working

Ask the Community Get Answers
1

I have followed the JavaScript examples from here to change the colour in a view: [https://docs.knack.com/docs/javascript-jquery-examples]

Example from the Knack website is:
// Replace view_1 and field_2 with your view and field keys
$(document).on(‘knack-view-render.view_1’, function(event, view, data) {
$(“#view_1 td.field_2”).each(function() {
// #ff0000 is red and the #1c631f is green
var textColor = ($(this).find(“span”).text().trim() == “Expired”) ? “#ff0000” : “#1c631f”;
$(this).css(“color”, textColor);
})
});

Below is what I have modified to (just replacing view_1, field_2, and “Expired” with the relevant text):

// Replace view_1 and field_2 with your view and field keys
$(document).on(‘knack-view-render.view_85’, function(event, view, data) {
$(“#view_85 td.field_192”).each(function() {
// #ff0000 is red and the #1c631f is green
var textColor = ($(this).find(“span”).text().trim() == “Update Profile with missing info”) ? “#ff0000” : “#1c631f”;
$(this).css(“color”, textColor);
})
});

This isn’t working … Does anyone know if the format has changed since these examples were added?

2

Did you happen to copy/paste the code example into Word first? The quotation marks are the fancy kind and not the correct syntax.

“ and ” need to be "
‘ need to be ’

3

After working through many suggestions from ChatGPT, I have found the following to update the field value in a particular view and add a status badge in the view as well. I am concatenating the data into a text formula field from 1x text formula field and 1x multiple choice field (that is updated via workflow). This uses CSS and JS and I cannot comment on performance as the app is still in production…

Here is the JS…
//
/ Status Badge Update to Oceans Job Ref Details Field_320 /
//
$(document).on(‘knack-view-render.any’, function (event, view, data) {
var cells = document.querySelectorAll(‘#’ + view.key + ’ .field_320 .kn-detail-body’);

cells.forEach(function(cell) {
var fieldValue = cell.textContent.trim();
var fieldValueParts = fieldValue.split(’ ‘);
var oceansRefNumber = fieldValueParts.shift();
var status = fieldValueParts.join(’ ');
var codeOutput;

if (status) {
  codeOutput = '<span class="job-info"><h5 class="mb-0 mr-10 font-20">Job #: ' + oceansRefNumber + '</h5></span> <span class="badge status-text badge-status-' + status.toLowerCase().replace(' ', '-') + '">' + status + '</span>';
  cell.innerHTML = codeOutput;
}

});
});

Here is the CSS…
/STATUS BADGES/

.job-info {
display: inline-flex;
align-items: center;
vertical-align: text-top;
}

.status-text {
font-family: Arial, sans-serif;
font-style: italic !important;
font-weight: bold !important;
vertical-align: middle;
padding: 3px 6px;
border-radius: 3px;
}

.mb-0 {
margin-bottom: 0;
}

.badge-status-load-scheduled {
background-color: #f2c7f3;
color: #c400d9;
margin-left: 5px;
font-size: 70%;
}

.badge-status-load-active {
background-color: #c8f2d4;
color: #267a4b;
margin-left: 5px;
font-size: 70%;
}

.badge-status-load-inactive {
background-color: #f8c7c7;
color: #7f0000;
margin-left: 5px;
font-size: 70%;
}

.badge-status-in-storage {
background-color: #fff5b3;
color: #e6b800;
margin-left: 5px;
font-size: 70%;
}

.badge-status-job-complete {
background-color: #a8b9ff;
color: #0033a0;
margin-left: 5px;
font-size: 70%;
}

.badge-status-accounting-review {
background-color: #f9dab8;
color: #a65c00;
margin-left: 5px;
font-size: 70%;
}

.badge-status-invoiced {
background-color: #b7b6b5;
color: #000000;
margin-left: 5px;
font-size: 70%;
}

Hope this helps!