Change background color based on IF solution

[jgfeller]

I am attempting to change the background color in a report search results page using an IF function.  I tried to use the following code but for some reason it does not work.  I am sort of new at this so I may just be missing something obvious but I cannot find it.

 

<script>

 

var isi = document.getElementById("visi[@field:id#]");

 

if ([@calcfield:1#] > 6){isi.parentNode.parentNode.style.backgroundColor = '#58ff33';}

 

else if([@calcfield:1#] <= 6 && [@calcfield:1#] >= 4){isi.parentNode.parentNode.style.backgroundColor = '#ffac33';}

 

else if([@calcfield:1#] < 4){isi.parentNode.parentNode.style.backgroundColor = '#ff3b33';}

 

</script>

 

 

[Mathilda]

On 2/6/2017 at 7:59 PM, jgfeller said:

I am attempting to change the background color in a report search results page using an IF function.  I tried to use the following code but for some reason it does not work.  I am sort of new at this so I may just be missing something obvious but I cannot find it.

 

 

<script>

 

 

var isi = document.getElementById("visi[@field:id#]");

 

 

if ([@calcfield:1#] > 6){isi.parentNode.parentNode.style.backgroundColor = '#58ff33';}

 

 

else if([@calcfield:1#] <= 6 && [@calcfield:1#] >= 4){isi.parentNode.parentNode.style.backgroundColor = '#ffac33';}

 

 

else if([@calcfield:1#] < 4){isi.parentNode.parentNode.style.backgroundColor = '#ff3b33';}

 

 

</script>

 

 

 

You need to use string parameters, so try removing # symbol in parameter names, also make sure that you inserted opening div tag in html block above all the fields and closing div tag below all the fields. Also I would recommend removing if in the last condition. Use else instead of else if.

You may take a look at the code I use on my datapage:

html block1 above all the fields: 

<div id="visi[@field:id]">

html block2 below all the fields:

</div>
<script>var isi = document.getElementById("visi[@field:id]");

if('[@field:Sales]' >=1000)

{isi.parentNode.parentNode.style.backgroundColor = 'green';}

else

{isi.parentNode.parentNode.style.backgroundColor = 'red';}

</script>

 

[Kurumi]

Hi @jgfeller,

You can check this article for changing the background color of your Results DataPage: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/

I 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!