Jump to content

Conditionally change color of text field in a details report

Recommended Posts

Hi All, I have a Details Report datapage where I would like to dynamically change the text color of a field. I looked at the below post, and it does everything I want to do, but it is for a tabular report. I am using a Details Report. Could someone help me modify the below code to a details report? (e.g. I have a field named Indicator and it is the second column in the report. If the text value is equal to "Final", the font color must be set to red.)


Link to comment
Share on other sites

Let's say the condition is this: 'I have a field named Indicator with different text values. If the text value in field named 'Indicator' is equal to "Final", the font color must be set to red.'. Dunno if this helps, but the 'Indicator' field is the 2nd column in the table, underlying the report. Again, this is for a Details Report datapage. Thanks!  

Link to comment
Share on other sites

The fields in the Details page are addressed as 'EditRecordFIELDNAME' with field name being the actual name of the field as it is in the table. Please refer to this article for help on how to address different Caspio form elements in JavaScript code.


By just changing the field name as per the above format in the code from the other forum article should get you the desired results.

I hope this helps.

Link to comment
Share on other sites

Thanks, the above guide was quite helpful with JS, though did not necessarily address the issue I am having. All of my fields are of form 'Display Only', hence it does not look like I can reference them in JS.  Would appreciate any additional comments or other suggestions.

Link to comment
Share on other sites

  • 4 weeks later...

Since the fields are not editable you can show the values in HTML Block.  For instance, if you want to show the first name in Red if expired: 


<a id="visi">First Name: [@field:First_Name]</a>

var isi = document.getElementById("visi");
 var now = new Date();
var expiration = new Date("[@field:Date*]"); 
if(expiration > now){
isi.parentNode.parentNode.style.backgroundColor = 'red';
isi.parentNode.parentNode.style.backgroundColor = '#NoColor';


Link to comment
Share on other sites

  • 2 years later...

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.

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.


  • Create New...