Jump to content

Simple value color setup with HTML or JavaScript

Recommended Posts

Hello everyone,

Thank you in advance for reading this and potentially responding.

Long story short: I have a simple Pivot data page with item names and months as well as submission status. This is used exclusively to spot records per item/month that have not been "submitted". My stakeholders want to see the status in color. Green for "Submitted", yellow for "Partly submitted", and red for "Not submitted".


Whether it's text or background color doesn't really matter much but I prefer background. I think I am capable of adjusting the tones on my own, but I struggle with making the script work in the first place.

The specific names of my fields are: Item Name, Month, Status.

Here is what I already tried, unfortunately, none of it ever displayed.
1. Adding a Header and Footer or an HTML block on the results page and disabling HTML in the tab Advanced.
2. Taking various scripts from Caspio guides and forums and attempting to change them to fit my field names and Status values.

For example, starting with this script from the guide:

<span id="[@field:ID#]changeColor1" style="color:#008000"></span>
<span id="[@field:ID#]changeColor2" style="color:#0000FF"></span>
<span id="[@field:ID#]changeColor3" style="color:white; background:red"></span>

if([@field:GPA#]>=3.5 && [@field:GPA#]<=4.0 )
else if([@field:GPA#]>=3.0 && [@field:GPA#] <3.5)
else if([@field:GPA#]>=2.5 && [@field:GPA#]<3.0 )

Let's leave the colors as they are since I am confident with that part. Here is my attempt at replacing the values with my own (the only relevant field is Status and it has three values: "Submitted", "Partly submitted", "Not submitted"):

<span id="[@field:Status]changeColor1" style="color:#008000"></span>
<span id="[@field:Status]changeColor2" style="color:#0000FF"></span>
<span id="[@field:Status]changeColor3" style="color:white; background:red"></span>

if([@field:Status] = 'Submitted')
else if([@field:Status] = 'Partly submitted')
document.getElementById("[@field:Status]changeColor2").innerHTML='Partly submitted';
else if([@field:Status]= 'Not submitted')
document.getElementById("[@field:Status]changeColor3").innerHTML='Not submitted';

And here is how I set it up (please mind that while I tested HTML blocks instead in other data pages and it still didn't work, you can't add them in the pivot table, so I'm limited to the Header and Footer):



Nothing changes.

I even made a draft table and a data page to test some of the scripts with their original field names but somehow it still didn't work for me.

I will be grateful for any help!

Thank you,

Link to comment
Share on other sites

Hi @dominikagdh

You can try the following script:


let status = cell.innerText.trim()
    if(status == 'Submitted') {
    cell.style.backgroundColor = '#D1FFBD'
    else if(status == 'Not Submitted') {
    cell.style.backgroundColor = '#FFCCCB'
    else if(status == 'Partially submitted') {
    cell.style.backgroundColor = '#FFFFE0'

Add it to the footer of your DataPage.

The end result should look something like this:


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