Change Background color for Calculated Field based on value

[DTINVN]

Hello,

Have a problem that I haven't seen in the forums or Online help.  Is there a way to conditionally change the background color for a calculated row of values. 

 

Specifically, I have a table that has a calculated row for each number series.  I want to conditionally change the background color when the row >= 100%.  I've seen solutions for regular rows but not a calculated row and how to adjust its formatting.

[BenWaFj]

Hello,

please did you ever get a solution for this? I am trying to do similar.

[IamNatoyThatLovesYou]

Hello everyone! You can add a javascript for this wherein if the value is 100 it will change color. You can check this HowTo link for more information. https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/ 

<script>
var isi = document.getElementById("visi[@field:UniqueFieldName]");
if('[@Yes/No FieldName]' == 'Yes'){
isi.parentNode.parentNode.style.backgroundColor = '#YesColor';
}
else{
isi.parentNode.parentNode.style.backgroundColor = '#NoColor';
}
</script>

[BaySunshine]

Hi everyone,

Caspio has a howto article on this topic:

https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/

Hope that 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!

[Kurumi]

Hi! You can also use this CSS code in other Form Elements:

Text Field and Email

<style>
input[name="InsertRecordFIELDNAME"][value="Active"] {
  color: green;
}
</style>

Display-Only field

<style>
span.cbFormData:has(+ input[name="InsertRecordFIELDNAME"][value="Active"]) {
  color: green;
}
</style>

[RuisiHansamu]

Hi There, there is an updated article in Caspio that you can check. It dynamically  change the colors of the value. https://howto.caspio.com/tech-tips-and-articles/dynamically-changing-colors-of-values/