Jump to content

Changing Background Color of Results Page Record


Recommended Posts

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>

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 1 month later...

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.

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

Loading...
×
×
  • Create New...