Conditionally change color of text field in a details report

[VA123]

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

https://forums.caspio.com/topic/7031-change-the-font-color-of-a-field-based-on-its-value/?tab=comments#comment-21628

[MayMusic]

What is the condition?  Please also take a look at this page:

 

[VA123]

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!  

[VA123]

If possible, could a member please assist with the above? Thanks!

[BaySunshine]

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.

[VA123]

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.

[MayMusic]

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>

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

 

[IamNatoyThatLovesYou]

Hi Everyone,

The answer on this forum post is similar to the question. You can check it for reference. 

 

 

[Kurumi]

Hello - Just wanted to share another way to dynamically change the color of the calculated value/field when a condition is met using CSS.

You can insert this in the Header:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

</style>

If you have more conditions or other fields, you can use this:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Inactive"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Active"])  {
  color: #29be25;
}
</style>

Hope it helps!

[Kurumi]

 Hi! You can also use this CSS code in other Form Elements:

Text Field and Email

<style>
input[name="InsertRecordFIELDNAME"][value="Active"] {
  color: green;
}
</style>

Display-Only field

<style>
span.cbFormData:has(+ input[name="InsertRecordFIELDNAME"][value="Active"]) {
  color: green;
}
</style>

 

[RuisiHansamu]

Hi- there is an update that changes the color of the value in Caspio. you can refer and follow the steps here: https://howto.caspio.com/tech-tips-and-articles/dynamically-changing-colors-of-values/