Jump to content

Conditionally change color of text field in tabular report


Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

  • 5 months later...

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

 

 

Capture.JPG

Link to comment
Share on other sites

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

 

 

Capture.JPG

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

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

  • 1 month later...

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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?

Link to comment
Share on other sites

  • 1 year later...

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>

Link to comment
Share on other sites

  • 1 year later...

 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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...