Jump to content
  • 0

Format a DataPage field based on another field's value


mmdouce
 Share

Question

Hi,

I have a "Change Log" DataPage that displays a record's old and updated field values (text fields).  I would like the DataPage to apply a background color to any of the new values for any given record. I have up to 10 sets of values (old and new) to compare for each record.  

I have been searching and found where to format a specific cell based on a set value (https://forums.caspio.com/topic/22604-how-to-add-colors-to-particular-cells-in-a-tabular-report-list/), but not when comparing to field values. Basically, I would need the script to apply a background color for a specific field if FieldA does not equal FieldB. Any guidance would be greatly appreciated.

 

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

I think you can edit the script in this article:
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('[@FieldA]' != '[@FieldB]'){
isi.parentNode.parentNode.style.backgroundColor = '#YesColor';
}
else{
isi.parentNode.parentNode.style.backgroundColor = '#NoColor';
}
</script>

 

Link to comment
Share on other sites

  • 0

Thank you for the resources. Unfortunately, neither of these options totally fits my scenario. I actually need a combination of the two - highlight a specific cell (not the entire row) with the criterion for the highlighted cell being a difference between (not equal to) it and another text field. 

Using the "var isi" script highlights the entire row/record, whereas the second option that highlights a specific cell is based on a defined value for the specific cell (nth column), not a comparison with another cell's value.

Link to comment
Share on other sites

  • 0

Thank you for the example. I must be doing something wrong as no color changes in my DataPage. I placed the following script in the footer:

<script>

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

if('[@field:Trek_Evt_Chg_Event_Title_Old]' != '[@field:Trek_Evt_Chg_Event_Title_New]'){
isi.querySelector('td:nth-child(8)').style.backgroundColor = '#ffff00';
}

else{
isi.querySelector('td:nth-child(8)').style.backgroundColor = '#ffffff';
}

</script>

Link to comment
Share on other sites

  • 0

I don't think those script should be placed in the Footer. Based on my observation, the scripts are using the similar implementation as the How To article that I have provided. You will need two HTML blocks. 1 at the very top of the elements and another at the very end. Basically, encapsulating the whole table with the div called "visi[@field:UniqueField]". 

Recheck the implementation but use this same code that you have.  I managed to make it work.
image.png.d08d0a39445a07db4dd88ec0e26a68bc.pngimage.png.1a317b65e5898dfce67264e9136ddacb.pngimage.png.22e75bd3920909077c991d6109015bee.png

Link to comment
Share on other sites

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
Answer this question...

×   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...
 Share

×
×
  • Create New...