Format a DataPage field based on another field's value

[mmdouce]

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.

 

[Tubby]

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>

 

[Tubby]

I also found this thread which has a similar request where only a specific field's bacground is changed not the entire row: 

 

[mmdouce]

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.

[Kurumi]

Hi @mmdouce - you may check these posts:

https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/customize-background-and-font-colors-in-report-datapage/

[mmdouce]

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>

[Tubby]

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.

[mmdouce]

Thank you! I missed that part. It works perfectly. I really appreciate your help resolving this.