Jump to content

JS: Format tabular display on result page in four ways

Recommended Posts

JavaScript Solution: Format tabular display on result page in four different ways

Feature Description:
This JavaScript solution shows how to format the Results page of a Search and Report DataPage in four different ways. For ease of reference, these formats are referred to as Type A, Type B, Type C and Type D respectively. The details are:
a. Type A: Individual column - Background color
b. Type B: Individual column - Font weight
c. Type C: Individual row - Font weight
d. Type D: Individual column - Conditionally format background color

Features in this solution that can be easily customized are,
a. Column number for Type A formatting.
b. Column number for Type B formatting.
c. Row number for Type C formatting.
d. Column number for checking if a specified condition is met.

This solution can be used "as-is", without any changes if
a. It is used in a Search and Report DataPage and
b. The table to be formatted is the first table of the web page in which the DataPage is embedded,
c. The 2nd column is to be formatted as Type A,
d. The 3rd column is to be formatted as Type B,
e. The 2nd row is to be formatted as Type C,
f. The 3rd column is to be formatted as Type D if a cell in the column contains the value Yes.
Note: Conditional formatting may not be displayed if the condition being checked is not satisfied by the data in the specified column.

To use this solution,
a. Highlight the code provided in the text area shown below and copy it.
b. Paste it inside the HTML Footer section of the Results page using the Caspio Bridge DataPage Wizard.



   /*(1) tablenum is the number of the table to be formatted */
   var tablenum = 0;

   /*(2) Two columns used for the different formatting styles */ 
   var columnNum1 = 1; /*used in Type A */
   var columnNum2 = 2; /*used in Type B and Type D */

   /*(3) rowNum is the number of the row to be formatted */
   rowNum = 2; //used in Type C

   /*(4) variables for colors. */
   var white = '#FFFFFF';
   var lightGrey = '#CCCCCC';
   var yellow = '#FFFF00';

   /*(5) variables for font style */
   var fontStyle1 = 'bold';
   /*(6) variable for condition to check in conditional formatting, Type D.*/
   var conditionString = "Yes";

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

   /*(7) Type C: style individual row: fontWeight */
   rows[rowNum].style.fontWeight = fontStyle1;

   for (var row=0; row<rows.length;row++) 
     var cells = rows[row].getElementsByTagName('td');

     /*(8) Type A: style individual column: background color */
     cells[columnNum1].style.backgroundColor = lightGrey;

     /*(9) Type B: style individual column: fontweight */
     cells[columnNum2].style.fontWeight = fontStyle1;
     /*(10) Type D: conditional formatting. */
     if (cells[columnNum2].innerHTML == conditionString)
        cells[columnNum2].style.backgroundColor= yellow;

To customize this solution, change the values of the variables tablenum, columnNum1, columnNum2 and rowNum as required.

Additional Considerations
This solution may be difficult to customize if the web page in which the DataPage is embedded, contains a large number of tables. In order to see the full effect of this solution, the appropriate columns and rows have to exist in the data table. Variations of such formatting can be implemented easily by using this solution as a guideline.

Tested Browsers
This JavaScript solution was tested on the following platforms and Internet Browsers only.
# MS Windows - IE 8.0, Firefox 3.5.7, Chrome, Safari 4.0.3
# Macintosh - Firefox 3.5.7, Safari 4.0.3

Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

Link to post
Share on other sites
This topic is now closed to further replies.
  • Create New...