How to change the background color of the record depending on the time value

[Septimana]

Hi, 

I have a table with the Date/Time field and a Tabular Report DataPage based on this table.

What I need is to change the  background color of those records that have time value greater than 12:30 to red and others to green.

Does anyone know how to achieve that?

Thanks

[CoopperBackpack]

Hello @Septimana,

I used this article  https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/  to customize the code for this particular case.

1) Add the HTML block to the "Search and Report Wizard - Configure Results Page Fields" page. Disable the HTML editor on the Advanced tab.

2) Paste the code in the HTML block

<span id="row[@field:id#]">[@field:id#]</span> 

<script>
 
var dateObj = new Date('[@field:Date_field]'); // use your field name with Date/Time data types here instead of the [@field:Date_field]
var dateInMinutes = dateObj.getHours()*60 + dateObj.getMinutes(); 

var MINUTES_FLAG = 750; //12 hours*60minutes+30minutes = 750 minutes, you may customize the value 

 if(dateInMinutes > MINUTES_FLAG) {
     document.getElementById("row[@field:id#]").parentNode.parentNode.style.backgroundColor= "lightpink"; 
 } else {
     document.getElementById("row[@field:id#]").parentNode.parentNode.style.backgroundColor= "lightgreen";
 }

</script>

Replace all field names with your local field names. 

Use the unique field in your table instead of the [@field:id#] field in the code above.

The output is the following:

Hope this helps.

[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>

 

[PotatoMato]

Hi! Just to update, Caspio has added an article about dynamically changing the color of a value: https://howto.caspio.com/tech-tips-and-articles/dynamically-changing-colors-of-values/

 

-Potato