Conditionally Format Values In Column Of Tabular Report Based On Values

[cecook01]

I have a tabular report and would like to conditionally format the contents of a column based on it's value, above a certain value color text as green, below color the text as red.  Also, is it possible to format the contents of one cell based on the value of another.   Any help greatly appreciated.

 

[svitlanataran]

Hi cecook01,

 

You can dynamically change the background color of the records. Take a look at the article: http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/

 

Could you elaborate on your second question?

[cecook01]

Matilda thanks for you reply.  Could not get this to work, was able  to find a way to format a cell based on the text value meeting a criteria. Will keep at this to get the row to format.  My second question was for example I have a sales goal of $1000 and sales  of $1500 I would like to show the value in green since my sales are greater than my goal.  Hope that explains it.  Any thoughts appreciated.

[svitlanataran]

Hi cecook01,

Sure, it's possible. You should change a script provided in the article: http://howto.caspio....a-results-page/ in the section Java Script Reference. As I understood you want to highlight sales bigger than 1000 $. 

Please find a script below:

<script>
var isi = document.getElementById("visi[@field:UniqueFieldName]");
if('[@Sales FieldName]' >= 1000){
isi.parentNode.parentNode.style.backgroundColor = 'green';
</script>

Please note, you should paste name of unique field instead of [@field:UniqueFieldName]

and name of the field with sales values instead of [@Sales FieldName]. Use picker to avoid misspellings.

 

Also disable HTML editor when you paste a script in the HTML blocks.  http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/

 

Let me know if you have questions.

[cecook01]

Matilda,

Thanks so much, I now have both examples working.  I just have one more question, instead of coloring the entire row, would you know how to just color the background of the one cell containing the sales number?

[aam82]

Hi cecook01,

Sure, it's possible. You should change a script provided in the article: http://howto.caspio....a-results-page/ in the section Java Script Reference. As I understood you want to highlight sales bigger than 1000 $. 

Please find a script below:

<script>
var isi = document.getElementById("visi[@field:UniqueFieldName]");
if('[@Sales FieldName]' >= 1000){
isi.parentNode.parentNode.style.backgroundColor = 'green';
</script>

Please note, you should paste name of unique field instead of [@field:UniqueFieldName]

and name of the field with sales values instead of [@Sales FieldName]. Use picker to avoid misspellings.

 

Also disable HTML editor when you paste a script in the HTML blocks.  http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/

 

Let me know if you have questions.

 

Matilda, the method you created doesn't work with AJAX updates any longer, following a Caspio update. Any ideas?

[svitlanataran]

Hi,

It looks like my report works fine with enabled ajax and when ajax is disabled.

Do you use a solution from here?

Can you provide your script?

[aam82]

I was told this morning by support that Bridge 9.1 added a new behavior to AJAX updates. When a row is updated, that row is highlighted with a subtle pulsing animation that fades. It must be that this behavior uses the same selector as the one provided in the official how to. When I use the provided script, and then update a row so that its background color should change, the updated row instead stays white and never receives a new color.

 

I came up with the following workaround, which is to add a className, instead of a backgroundColor, to the row. Then inline a style for the classNames. This allows the new pulse highlight behavior to occur, and then colors the background:

 

[@field:ID]
<a id="visi[@field:ID]">
<script>
var isi = document.getElementById("visi[@field:ID]");
if('[@field:criteria]' == 'Yes'){
isi.parentNode.parentNode.className = "greenyes";
}
else{
isi.parentNode.parentNode.className = "redno";
}
</script>
<style>
.greenyes {
background-color: #add5a0;
}
.redno {
background-color: #FFC7CE;
}
</style>

[svitlanataran]

Now I see what you mean. I use inline edit with disabled AJAX, it works fine. I don't use bulk edit in my report.

 

Thanks for sharing this solution!

[Lynette]

Hi, I am trying to do something similar on a date field, I need the line to turn orange if the datefield is within current month and turn red if its within current week (7days).

Can someone help me, I am not a coder and don't seem to be getting it right amending the code above.

 

Thanks in advance,

[Kurumi]

This new post might help as well: