Jump to content

Conditional Formatting Of Text In Datapage Tabular Report


Recommended Posts

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

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

  • 2 weeks later...
  • 6 months later...
  • 4 months later...

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!

Link to comment
Share on other sites

Link to comment
Share on other sites

  • 2 months later...

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?

Link to comment
Share on other sites

  • 5 years later...

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!

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

×
×
  • Create New...