Format Numbers And Background In A Report

[senicholas]

I have asked this before, but I just cannot get it to work. I am running a report with the first column, field name is F7. It contains a series of numbers which I which for the numbers to turn red when they exceed the number 7. Here is what I have now in the footer, but it does not work:

 

<br />
<SCRIPT LANGUAGE="JavaScript">
var elems = document.getElementsByTagName("F7");
for (var i=0, m=elems.length; i<m; i++) {
if (elems.innerHTML>7)
  { elems.style.color="red";}
}
</SCRIPT>

 

It would be even better if I could change the background color to yellow

[Jan]

Hi senicholas,

 

I have found the solution in the article. But the solution is rather big, so I have edited the code.

Please disabled AJAX on your DataPage, then add Header&Footer element, select the "Footer" element, click the "Source" button and enter the following code:

<SCRIPT LANGUAGE="JavaScript">
/* tableNum is the number of the table to be formatted, the first table is 0. If several DataPages are deployed on the webpage, several tables are displayed*/
var tableNum = 0;

/* tableNum is the number of the column to be formatted, the first column is 0. */
var columnNum = 0;

/* variables for colors. You can find names for colors in the article http://www.w3schools.com/html/html_colornames.asp */
var v_textColor = "red";
var v_backgroundColor = "yellow";

var tbl = document.getElementsByTagName('table')[tableNum];
var rows = tbl.getElementsByTagName('tr');

for (var row=1; row<rows.length;row++)
{
var cells = rows[row].getElementsByTagName('td');
if (cells[columnNum].innerHTML > 7)
{
cells[columnNum].style.color = v_textColor;
cells[columnNum].style.backgroundColor = v_backgroundColor;
}
}
</SCRIPT>

I hope, it helps.

[senicholas]

I replaced the original footer with above, unfortunately, the columns did not change background color. Thanks for your help.

[Jan]

Hi senicholas,

 

If I understand correctly, maybe many reasons why the code does not work.

Have you disabled AJAX on your page? It is enabled by default. You can check the setting on the "Results Page Options" step.

Could you provide the URL of your page?

[senicholas]

Ajax is turned off. Here is the url:

 

https://b5.caspio.com/dp.asp?AppKey=9f653000e90c1f13e3f34386b118

[Jan]

Hi senicholas,

 

As far as I can see, cells are yellow and texts are red, you can see the screenshot in the attachment.

 

Could you please elaborate what is wrong?

Maybe, if you see another picture, the clearing of cache can help.

[Blledzgreen]

I know this is an older thread, but posting this in case it helps anyone else.   I was having trouble with the above code failing when data grouping was turned on for any of the result set rows.  Getting direct to the "cbResultSetDataRow" class allowed me to circumvent the grouped rows.  Not the best solution if you have aggregation on, but works without it.   Note: Only tested on tabular report page

<SCRIPT LANGUAGE="JavaScript">
/* tableNum is the number of the table to be formatted, the first table is 0. If several DataPages are deployed on the webpage, several tables are displayed*/
var tableNum = 0;

/* columnNum is the number of the column to be formatted, the first column is 0. */
var columnNum = 0;

/* variables for colors. You can find names for colors in the article http://www.w3schools.com/html/html_colornames.asp */
var v_textColor = "red";
var v_backgroundColor = "yellow";

var tbl = document.getElementsByTagName("table")[tableNum];
var rows = tbl.getElementsByClassName("cbResultSetDataRow");

for (var row=0; row<rows.length;row++)
{
var cells = rows[row].getElementsByTagName('td');
if (cells[columnNum].innerHTML > 7)
{
cells[columnNum].style.color = v_textColor;
cells[columnNum].style.backgroundColor = v_backgroundColor;
}
}
</SCRIPT>