Simple value color setup with HTML or JavaScript

[dominikagdh]

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>

<script>
if([@field:GPA#]>=3.5 && [@field:GPA#]<=4.0 )
{
document.getElementById('[@field:ID#]changeColor1').innerHTML='A';
}
else if([@field:GPA#]>=3.0 && [@field:GPA#] <3.5)
{
document.getElementById("[@field:ID#]changeColor2").innerHTML='B';
}
else if([@field:GPA#]>=2.5 && [@field:GPA#]<3.0 )
{
document.getElementById("[@field:ID#]changeColor3").innerHTML='C';
}
</script>

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>

<script>
if([@field:Status] = 'Submitted')
{
document.getElementById('[@field:Status]changeColor1').innerHTML='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';
}
</script>

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,
Dominika

[Volomeister]

Hi @dominikagdh

You can try the following script:

<script>

document.querySelectorAll('.cbResultSetData').forEach(cell=>{
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'
    }  
})
</script>

Add it to the footer of your DataPage.

The end result should look something like this:


 

[dominikagdh]

@Volomeister I can't thank you enough. This not only worked but you also chose better colors than I would have. Made my day

[CoopperBackpack]

Hello @dominikagdh,
I shared a solution for a similar case too.

I understand that you already have a working solution. Just sharing it for future reference.