Using JavaScript, you can dynamically change the background color of a results page item based on data in the referenced record.  This can be helpful for highlighting records that require immediate action.  This article shows methods for changing the color of both gallery/list Reports, and tabular Reports.

Steps to set the background color for a row (record) in Tabular Report :

In order to work correctly, your source table must have one unique field such as an AutoNumber.  An AutoNumber field can be added at any time in the table Design view.  The JavaScript included in this article uses a Yes/No field to determine what color the record background should be.

  • Select the DataPage you would like to update for this scenario and click Edit to open the DataPage wizard.
  • On the DataPage DataSource screen, enable Advanced Options and parameters.
  • Proceed to the Configure Results Page Fields screen.
  •  Now, you create a placeholder column. Be aware that this method will make one of your columns un-sortable. Choose a column that is not used for sorting your results page and use the delete button to remove it from the DataPage elements panel.
  • Using the Insert button at the lower right hand corner of the DataPage Elements panel add an HTML Block.
  • Using the HTML Block’s Insert button, at the lower right corner, insert the parameter for the column you removed in step one.
  • Write the parameter name (or appropriate label) in the label field above the HTML Block panel.

How_to_dynamically_change_the_background_of_a_results_page_record_1

Add the row color changing JavaScript:

Also in this HTML Block we are going to add an anchor tag and the JavaScript to change the background of the row.

  • Create an HTML anchor tag and set its id value to “visi” followed immediately by the unique field (e.g. AutoNumber) parameter.
  • Paste the JavaScript from the end of this article after this anchor tag.  Be sure that the JavaScript is surrounded by script tags.
  • Replace the Yes/No field with the Yes/No field parameter from your table.  Be sure the parameter is surrounded by single quotes.
  • Change the colors in the JavaScript to match your Style/website.

How_to_dynamically_change_the_background_of_a_results_page_record_2

Note: This technique requires that your DataPage Style not have Hovered Rows enabled.  Hovered rows will change the background color back to the default if the end-user moves their mouse over the row.  You can disable Hovered Rows in the Table Layout section of the Style wizard.

How_to_dynamically_change_the_background_of_a_results_page_record_3

Steps to dynamically setting a list/gallery Report record background color:

List/gallery Report backgrounds are changed in much the same way as tabular reports.  In list/gallery Reports you can also hide all of the record data.  In this example we are replacing a record information and details link with an image indicating the record is no longer available.

Surround the fields with a div tag:

  1. In the DataPage wizard, enable parameters.
  2. Proceed to the Configure Results Page Fields screen.
  3. Using the Insert button at the lower right hand corner of the DataPage Elements panel insert two HTML blocks
  4. Using the arrow buttons position the HTML Blocks at the beginning and end of the DataPage elements list.
  5. In the first HTML Block open an HTML div tag and set its id to “visi” followed by the parameter for the table’s unique (AutoNumber) field.
  6. Close the div tag in the last HTML block.
    How_to_dynamically_change_the_background_of_a_results_page_record_4

Add the JavaScript:

  1. In the second HTML Block, paste the JavaScript from the end of this article after the closing div tag.
  2. Update the Yes/No parameter to reflect the Yes/No field from your table.
  3. This JavaScript sets the background to an image.  Replace the Image URL with the URL of an image on your server.  Alternatively, you can also change this line to change the backgroundColor attribute.  If using a color value, make sure the hexadecimal color is surrounded by single quotes.
  4. Click Finish.

Set a standard height for the Report rows:

In the Style for your DataPage you may want to set a fixed height for the table rows.  This way if all of the records in a single row have hidden data, the row will still have a standard height.

  1. Open the Style wizard by selecting your DataPage Style and pressing the Edit button.
  2. In the Style Settings screen, click the Source tab.
  3. In the DataPage Elements Panel, click Results Page and select the List/Grid Layout section.
  4. Add a fixed height to the cbResultSetListViewRow class as shown in the following picture.

How_to_dynamically_change_the_background_of_a_results_page_record_6

JavaScript Reference

Tabular Report JavaScript:

<script>
var isi = document.getElementById("visi[@field:UniqueFieldName]");
if('[@Yes/No FieldName]' == 'Yes'){
isi.parentNode.parentNode.style.backgroundColor = '#YesColor';
}
else{
isi.parentNode.parentNode.style.backgroundColor = '#NoColor';
}
</script>

List/Gallery Report JavaScript:

<script>
if('[@Yes/No FieldName]' == 'No'){
var isi = document.getElementById("visi[@field:UniqueFieldName]");
isi.style.display = 'none';
isi.parentNode.parentNode.style.backgroundImage = 'url("ImageURL")';
}
</script>

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge’s standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.