JS CODE HELP: If field_X has a text="Blue" change font color to #01e0fd

Knack Community
1

Hi Guys,

Can anyone with JS skills help me with a code to change font color from a field_X data if in the data the text “Blue”? I would like to apply it to all types of views.

And would be also cool to add an icon with the same color in the JS, but only if possible.

Thank you!

2

I found this code, but it’s applying whether the expression is Equipe Rosa or not:

$(document).on('knack-view-render.any', function(event, view, data) {
    $("td.field_1416 > span").each(function() {
      var cordaequipe = ($(this).find("span").text().trim() == "Equipe Rosa") ? "#ff00ee" : "#ff00ee";
      $(this).css("color", cordaequipe);
      })
  });

I also would like to apply bold to font.

3

You should rather use CSS instead of JS.
You could apply this to all views.
It is much easier

4

@Godfred How?

5

Hi @Guilherme,
Try this codeI saw

// 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);
// })
//});

6

I’m using this code, but if the text is not find, it apply the second color. I need to change the code to do not apply other color if the text is not found.

7

So change the “==” sign to “!=” or “!==”

8

The problem now is that I need to use this code with multiples text search criterias, like this:

$(document).on(‘knack-view-render.any’, function(event, view, data) {
$(“td.field_1416 > span , td.field_1416 > span > i”).each(function() {
var cordaequipe = ($(this).find(“span”).text().trim() != “Equipe Rosa”) ? “#a4b7c9” : “#ff00ee”;
$(this).css(“color”, cordaequipe);
})
});
$(document).on(‘knack-view-render.any’, function(event, view, data) {
$(“td.field_1416 > span , td.field_1416 > span > i”).each(function() {
var cordaequipeVERDE = ($(this).find(“span”).text().trim() != “Equipe Verde”) ? “#a4b7c9” : “green”;
$(this).css(“color”, cordaequipeVERDE);
})
});

And the last code is canceling the first. Any idea on how to make this idea work?

9

you can use the logical operators like OR (||) or AND (&&)
For eg.
var cordaequipe = ($(this).find(“span”).text().trim() != “Equipe Rosa” || “Equipe Verde” )?..

I hope this works

If not, you may have to use else if statmenent in the javascript

10

The idea is this, each team has its own color:

$(document).on(‘knack-view-render.any’, function(event, view, data) {
$(“td.field_1416 > span , td.field_1416 > span > i”).each(function() {
var cordaequipe = ($(this).find(“span”).text().trim() = “Team Pink” || “Team Green” || “Team Blue”) = “#ff00ee” : “#56ff00” : “#00a9ff”;
$(this).css(“color”, cordaequipe);
})
});

but code is not working…

11

Seems I don’t get the logic you are trying to use.
Send me an email (gofredbrown@gmail.com) so we could discuss into details.
We will definitely put the outcome here

12

Why don’t you just use the display rules found in the builder for the field you want to change to different colors based on the field’s value.

Rule#1
If field1 is “Equipe Rosa” then set text color to “#f62304” (red)

Rule#2
If field1 is “Equipe Verde” then set text color to “#2ab27b” (green)

You could also set the text style (bold, italic etc…) and add an icon based on field value.

13

Godfred, there’s a typo in your email !!! I tried sending you a message to this address and got a wrong email reply.

I guess I’ve been copying the only instance with a typo in all the forum - me an my luck!

Normand

14

Yeah, the correct email is godfredbrown@gmail.com