Conditional Formatting Of Text In Datapage Tabular Report

[alanhoffman]

I have a DataPage Report in Tabular format that produces a table of data e.g.:

 

Fred  PH SH OK 

John  SH OK OK

 

etc.

 

I wish to use formatting to vary the colour and/or background of these text fields depending on their value e.g. OK = Green SH = Blue PH = Red

 

I understand how to do this but need help with the coding..

 

Any assistance would be greatly appreciated...

 

Cheers,

 

Alan

[Jan]

Hello Alan,

 

Welcome to the Caspio forum!

 

If I understand correctly, the "Fred  PH SH OK" text contains in four fields:

Fred

PH

SH

OK

 

Is it correct?

[alanhoffman]

Hi Jan. Yes that's correct. The fields are in a table across the page and down it. In total approx 20 columns by multiples row with all fields being individual text fields.

[alanhoffman]

Also FYI, at this stage the report is accessed via a URL - it is not embedded. I'm not sure if that makes a difference to the coding options.

[Jan]

Hi Alan,

 

You can add a Header&Footer element, select the Footer element, click the Source button and enter the following code:

<SCRIPT LANGUAGE="JavaScript">
var elems = document.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
if (elems[i].innerHTML=="OK")  { elems[i].style.color="green";}
if (elems[i].innerHTML=="SH")  { elems[i].style.color="blue";}
if (elems[i].innerHTML=="PH")  { elems[i].style.color="red";}
}
</SCRIPT>

You can add as many conditions as you want, like

if (elems[i].innerHTML=="HH")  { elems[i].style.color="yellow";}

But if you use Ajax (or Bulk Delete), the Script code in Footer may does not work.

In this case, you can add an HTML Block, select it, click the Source button and enter the following code:

<div id="[@field:id]"></div>
<SCRIPT LANGUAGE="JavaScript">
var line_id='[@field:id]';
var line=document.getElementById(line_id).parentNode.parentNode;
var elems = line.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
if (elems[i].innerHTML=="OK")  { elems[i].style.color="green";}
if (elems[i].innerHTML=="SH")  { elems[i].style.color="blue";}
if (elems[i].innerHTML=="PH")  { elems[i].style.color="red";}
}</SCRIPT> 

Please, change "id" in both [@field:id] to name of the unique field of your table.

 

I hope, it helps.

[alanhoffman]

Oustanding.... MANY thanks Jan.. you truly are a "Caspio Rockstar"

 

Thank you - excellent work...

 

Alan (Australia)

[alanhoffman]

PS And yes, it certainly did help...

 

Thanks again..

[Jan]

I am glad my suggestion helped

 

Please do not hesitate to ask if you have further questions.

[aam82]

Thanks for this script Jan, though for me, it is only styling the first record result. I'm using it on a Grid with the HTML block method.

[Jan]

Hello aam82,

 

Please make sure, that in the lines

<div id="[@field:id]"></div>
var line_id='[@field:id]';

The unique field is used, usually it is "id".

[aam82]

I could not get this to work until I followed this article

http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/

 

which explains that there must be 2 html blocks, which should be arranged as the first and last element in the datapage. this opens and closes the div.

[aam82]

I think since Bridge 8.7, this method of conditional formatting doesn't work following a regular Edit; only Bulk Edits and Grid Edits trigger the kind of ajax call that can re-prompt this script. 

[aam82]

This has changed once again following a Bridge update. Now, an AJAX update does not re-trigger the script that Jan posted for AJAX pages. A page reload is required to re-style AJAX updated records.

 

Does anyone know a fix so that conditional formatting works with AJAX? Thank you!

[aam82]

My mistake, I am using this forum post by Matilda:

 

http://forums.caspio.com/index.php/topic/5481-conditionally-format-values-in-column-of-tabular-report-based-on-values/?hl=isi.parentnode.parentnode#entry17266

 

The new AJAX behavior breaks that method, not this thread.

 

edit: I posted a workaround here http://forums.caspio.com/index.php/topic/5481-conditionally-format-values-in-column-of-tabular-report-based-on-values/

[gcGERM16]

Hello, 

 

I'm new to CSS / HTML / Java and new to Caspio. I have a data table with 9 columns, see below for the headings:

 

ID, Name, Surname, Email, Mobile no., Genre, Score, Percentage Score, Rank

 

I'd like to format Rank column (column 9) so that if the cell contains the text:

• Low - then the text becomes green and bold
• Mid - then the text becomes orange and bold
• High - then the text becomes red and bold

I only want the formatting to apply to the "Risk" column.

I've read your solution above but I can't get this to work. Using my table/data what would I change var line_id='[@field:id]'; to and what would I change var elems = line.getElementsByTagName("td") to make this work?

[NiceDuck]

Hello @Jan

Thank you so much for your script, I modified it a bit to fit on my workflow where I need to make every negative numbers on my tabular report datapage results to be red and this is what I came up with:

 

<SCRIPT LANGUAGE="JavaScript">
var elems = document.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
if (elems[i].innerHTML.charAt(0) == "-")  { elems[i].style.color="red";}
}
</SCRIPT>

I placed this at the footer and it magically works! 

Thank you!