Changing Background Color of Results Page Record

[Medron]

Are you able to use Calculated Fields in the Javascript code to change background colors?

I cannot seem to get them to work. See code below...

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

if('[@Calculated_Field_1]' > 30){
isi.parentNode.parentNode.style.backgroundColor = '#efe173';
}

else if('[@Calculated_Field_1]' > 1440){
isi.parentNode.parentNode.style.backgroundColor = '#ef7f73';
}

else{
isi.parentNode.parentNode.style.backgroundColor = '#FFFFFF';
}
</script>

[Vitalikssssss]

Hi @Medron,

Please make sure that you use correct event handler instead of a default Javascript event handler "on load". 

You need to something like this:

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
  
<a id="visi[@field:Patient_Name]"> <script>
var isi = document.getElementById("visi[@field:Patient_Name]");

if('[@Calculated_Field_1]' > 30){
isi.parentNode.parentNode.style.backgroundColor = '#efe173';
}

else if('[@Calculated_Field_1]' > 1440){
isi.parentNode.parentNode.style.backgroundColor = '#ef7f73';
}

else{
isi.parentNode.parentNode.style.backgroundColor = '#FFFFFF';
}    
});
</script>

You can find more details about Caspio event handlers in the following article.

https://howto.caspio.com/deployment/

Hope this helps.

 

Regards,

vitalikssssss

[cheonsa]

Hi @Medron,

 

You can also use HTML block to insert your code.

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

 

Regards,

kristina

 

[RuisiHansamu]

Hi, just to update. Here is a forum post that is updated and similar to this topic.