Styling Advanced Reports

Feb 07, 2022 • 3 minutes to read

The look and feel of your DataPages can be modified using the Style object in your Caspio. This way you can style the Datapage to match your website design and layout. By editing the Style, you have several options to modify the look and feel of Tabular Results Pages that use Advanced Reporting features.

Data Grouping Standard Style Options

The Style of individual data groups can be customized up to four levels deep. The Style wizard lets you set an independent background color and font style for each group. If you have more than four levels, the styling will start again from level one.

Expand and Collapse controls are also customizable. You can use a text control (using + and – characters) and set the font style. Alternatively, you also have icons in several colors to choose from.

You can also use the Custom Images option to use any image you would like. To use custom images, upload the images to your web server. Insert the URL of each image into the appropriate field.

Totals & Aggregation Style Options

For Totals & Aggregation, you can use the Style wizard to independently format the font styles for the labels and the resulting data for both the subgroups and the final aggregate row.

How to Add a Totals Line (Advanced)

On this screen, select the DataPage Elements (labels, fields, buttons, etc.) on the left, and modify their Settings on the right. Additionally, you can edit the Source to further customize the CSS code if desired.

To add a line, click the Source tab. Expand the Results Page group and locate the Aggregation section. You will need to add one line of CSS code to both of the following items: .cbResultSetTotalsLabelCell and .cbResultSetTotalsDataCell

A sample* line of CSS to create a border is:

border-top: 2px solid black;

In this example, you can change each of the three items after the colon.

2 indicates the width of the border
Solid indicates the line style
Black indicates the line color

To find out more about CSS border styles, take a look at this article: http://www.w3schools.com/css/css_border.asp

Group Totals Line:

To create a Totals and Aggregations line for individual groups, you will follow the same process as above. Expand the Results Page group and locate the Grouping section. You will need to add one line of CSS to the following group 1 elements: .cbResultSetGroup1SubTotal and .cbResultSetGroup1DataCell

Add the CSS code for each group level as necessary.

Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio 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.