Jump to content

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

Recommended Posts


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?


Link to comment
Share on other sites

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> 

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";


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.

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.

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