Conditionally change color of text field in tabular report

[AdamH]

Hi everyone, all I want to do is this: 

In a tabular report on a results page, if First_Name = “Bob” then display that exact text in green.

In other words, imagine a report of a typical user database (first name, last name, address, zip, favorite food, whatever) and every time someone has the first name "Bob," you see the word "Bob" in green. Otherwise that field will display in default color, as will everything else in the report.

I promise I’ve read through and tested all the examples in the forums, including making sure AJAX is disabled so it’s not interfering. But my JavaScript knowledge is tiny, and the existing related posts have gotten kind of contradictory and outdated, with the main two both ending with “See the other post." Support pointed me to this page, http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/,  but that talks about changing background colors of rows, which isn't what I'm trying to do. I just want to change the text color of an individual field every time that field = whatever I specify.

I imagine this is really basic stuff, any help would be greatly appreciated. Thanks!

[MayMusic]

Instead of the actual filed add HTML Block disable rich text editor and use the code below:

 

<div id="mydiv[@field:ID]"> </div>
<SCRIPT LANGUAGE="JavaScript">

if ("[@field:First_Name]" == "Red"){
document.getElementById("mydiv[@field:ID]").innerHTML ="<span style='color:blue;'> [@field:First_Name] </span>";
} else{
document.getElementById("mydiv[@field:ID]").innerHTML ="[@field:First_Name]";

}
</SCRIPT>

replace [@field:ID] with the field which is holding unique field value like autonumber

[AdamH]

Thanks. I appreciate the fast reply. But this isn't working. What happens is I get an extra column, but with just a blank space at the header and no data.

I was certain to put the unique field and the "target" field where you indicated. I'm also presuming where you wrote "Red" above, that is the actual result we're looking to re-color (i.e. in your example if First_Name was "Red" then that name "Red" would be displayed in blue).

[MayMusic]

Can you give me the URL to the page?

[AdamH]

See your inbox. Thanks!

[MayMusic]

I see the issue you have smart quote around name:

 

"[@field:FirstName]" == “Bob”

Change it to : "[@field:FirstName]" == "Bob"

 

Java script does not recognize smart quotes.

[MayMusic]

[MayMusic]

Screen shot of the issue:

[MayMusic]

I changed the quote and I got result:

 

[AdamH]

EDIT: Whoops, missed a post. Got it. Thank you!!!!!!!

[AdamH]

Big thanks again for that code, your help is invaluable.

The new problem that comes out of this is, with this method, I can't Inline Edit that field. Any way to make that happen?

[MayMusic]

I am afraid it is not possible to edit HTML Block content in inline edit, you can do it either in details page or Bulk update

[AdamH]

Okay thanks. So just so I'm clear on my options re: Inline edit, I can either:
1. Color an entire single row and retain Inline edits, or
2. Color an individual cell, but lose Inline edit for that field.

...is that right? Thanks.

[DoDoTwin]

Hi,

I tried your code in a HTML Block:

 

<div id="mydiv[@field:Agent_ID#]"> </div>

<SCRIPT LANGUAGE="JavaScript">

if ("[@field:Agent_Name]" == "Jason"){ document.getElementById("mydiv[@field:Agent_ID#]").innerHTML ="<span style='color:blue;'> [@field:Agent_Name] </span>"; }

else{ document.getElementById("mydiv[@field:Agent_ID#]").innerHTML ="[@field:Agent_Name]";

 

When I do a preview, I can see the code above with IDs. But not the name in blue.

Please find attached a screenshot of the preview page.

 

Thanks

 

Dorian

 

 

[Mathilda]

17 hours ago, DoDoTwin said:

Hi,

I tried your code in a HTML Block:

 

<div id="mydiv[@field:Agent_ID#]"> </div>

<SCRIPT LANGUAGE="JavaScript">

if ("[@field:Agent_Name]" == "Jason"){ document.getElementById("mydiv[@field:Agent_ID#]").innerHTML ="<span style='color:blue;'> [@field:Agent_Name] </span>"; }

else{ document.getElementById("mydiv[@field:Agent_ID#]").innerHTML ="[@field:Agent_Name]";

 

When I do a preview, I can see the code above with IDs. But not the name in blue.

Please find attached a screenshot of the preview page.

 

Thanks

 

Dorian

 

 

Hi Dorian, you didn't hit "Source" button before inserting code. You can find more information here

Cut code->hit Source-> paste the code back

[DoDoTwin]

Thanks, it works perfectly. Great topic, it should actually be in the How to do section.

 

[DoDoTwin]

Hi Mathilda,

 

After working and adding code, I figured out that:

1- The HTML block with the code is adding 1 column.

2- It's not possible to have 2 HTML blocks.

=> It means that on 1 DataPage, we CAN'T color more than 1 field/Column. I would like to color several fields/columns depending on values.

For example,  I would I have several columns like: Name, Sex, Age, Income and to color the text of 1 cell depending on the conditions.

Please see below my code :

<div id="mydiv[@field:Agent_ID#]"> </div>

<SCRIPT LANGUAGE="JavaScript">

if ("[@field:Agent_Sex]" == "M"){ document.getElementById("mydiv[@field:Agent_ID#]").innerHTML ="<span style='color:blue;'> [@field:Agent_Sex] </span>"; }

else{ document.getElementById("mydiv[@field:Agent_ID#]").innerHTML ="<span style='color:pink;'> [@field:Agent_Sex] </span>"; }

</SCRIPT>

I would like a code that DO NOT add a column or if I can have several checks on several columns.

Is it possible to create a code in footer or in the wordpresspage?

 

Thanks

Dorian

 

 

[Mathilda]

Hi everyone,

I just want to share this solution. If you need to define color for the whole column, you may use the following script in an HTML block:

<div id="mydiv[@field:id]"> </div>
<SCRIPT LANGUAGE="JavaScript">
document.getElementById("mydiv[@field:id]").innerHTML ="<span style='color:blue;'> [@field:FieldName]</span>";

</SCRIPT>

replace [@field:id] with unique field and [@field:FieldName] with name of your field

 

[Paul2vey]

Hi Mathilda,

I'm new to Caspio and your solution to coloured fonts for a column is just what I want.  I am not a techie and copied and pasted your solution into HTML Block, inserted field names, pressed <>Source and the preview shows a new column but with the code for each row.  What am I doing wrong please

[Mathilda]

54 minutes ago, Paul2vey said:

Hi Mathilda,

I'm new to Caspio and your solution to coloured fonts for a column is just what I want.  I am not a techie and copied and pasted your solution into HTML Block, inserted field names, pressed <>Source and the preview shows a new column but with the code for each row.  What am I doing wrong please

Hi, You need to hit source tab before inserting code. You may also disable html editor.

Hope it helps

[IMTanuki]

I tried the JS script above - it mostly works, with 2 exceptions:

The field label (in General Options) works for non-custom fields, but doesn't work with custom HTML blocks (my column heading is blank for this field).

text-align: center; doesn't seem to do anything - my data is left-aligned and I can't seem to change that.

I realize this is an old thread...just thought I'd ask - has anyone encountered these 2 problems and know how to remedy?

[brianspasko]

I have a variation on this problem that I am hoping someone might be willing to help me with.

My situation is that I am using a calculated field int he search results of my tabular report.  The calculated field selects information from several fields in the table and displays emergency medical information about a student.  for example it might show "Allergy: Life-Threatening."

As a result, the content is dynamic and because of the importance of the information I would like these entries to display in red on the search results page to alert our teachers of the medical concern.

I have tried using a !== condition in my script so as to select all values that are not blank.  But it's not working.  I would be grateful  to anyone who could offer a solution. Thank you!

Here is the script that I am using.  My coding experience is extremely limited. 

<div id="mydiv[@field:SD_StudentID]"> </div>
<SCRIPT LANGUAGE="JavaScript">

if ("[@calcfield:1]" !== "XXX"){
document.getElementById("mydiv[@field:SD_StudentID]").innerHTML ="<span style='color:blue;'> [@calcfield:1] </span>";
} else{
document.getElementById("mydiv[@field:SD_StudentID]").innerHTML ="[@calcfield:1]";

}
</SCRIPT>

[pmcfarlain]

 None of these solutions are having any effect on my table. Am I doing something wrong?

<div id="mydiv[@calcfield:1#]"> </div>

<SCRIPT LANGUAGE="JavaScript">

if ("[@calcfield:1#]" < "0"){ document.getElementById("mydiv[@calcfield:1#]").innerHTML ="<span style='color:red;'> [@calcfield:1#] </span>"; }

</SCRIPT>

This should be able to set the text color to red if the calculated field "Days" (which gets the days left until the project is due) is negative. Ideally, I'd like to set the background yellow and the text red. The background thread wasn't working for me either. Am I using the wrong IDs? or does it not work with calculated fields?

[Kurumi]

Hi @pmcfarlain,

Are you referring to the Columns or Rows of Tabular Report? Can you provide your page URL?

[pmcfarlain]

33 minutes ago, Meekeee said:

Hi @pmcfarlain,

Are you referring to the Columns or Rows of Tabular Report? Can you provide your page URL?

I'd like it to set the row red. The field I'm referring to in the HTML is the calculated field "Days". This is the URL for a sample page: https://c1dcs476.caspio.com/dp/66ca9000fb6b84ef7b9a462ba0a2