Jump to content

How to color-code the search results (report) that reference a calculated field compared to another field

Recommended Posts

I don't have a question. I just wanted to share.

I have appreciated previous posts and Caspio articles on how to use Javascript to change background colors on a row or cell when a certain value is detected. 

Recently, I wanted to do this on a calculated field, but I also wanted to color the row by comparing two values in a record, and I wanted a different background color depending on that comparison. In my case, I have a column in the table called Target and a calculated field called Count. By way of explanation, we ask people to volunteer on teams and the "count" shows how many people that have volunteered so far and "target" is our goal of how many we hope to get on a team. 

So I color-code a row with green when we've met our target number of volunteers, and I color-code the row as light red when we're still short.


I started with this Caspio "howto" article. Here's the code I used.

  1. On the screen for Configure Results Page Fields, I added an HTML block as the first element. 
    It just had this single line:   <div id="visi[@field:Record_ID]">

    my field called "Record_ID" is a unique field. It is import to reference a unique field like an autonumber field.
  2. I added another HTML block in my list of datapage elements. It's the last element, which allows the entire row in the report to get the background color.
    In the code below, I'm comparing my field called "Target_No" against the calculated field that I have labeled as "Count".


    if("[@field:Target_No]" > "[@calcfield:1#]"){
    var isi = document.getElementById("visi[@field:Record_ID]");
    isi.parentNode.parentNode.style.backgroundColor= "#ffe6e6";
    else if("[@field:Target_No]" == "[@calcfield:1#]"){
    var isi = document.getElementById("visi[@field:Record_ID]");
    isi.parentNode.parentNode.style.backgroundColor= "#e6ffe6";





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