Web Designer
Tutorial 2: Create Tabular Report
Get Started > Tutorial 2: Create Tabular Report

In tabular reports, the data is organized along the rows and columns of a Table data region. The data in the form of fields and entities is fetched from the data set added to the report. 

What You Will Learn

This tutorial guides you through the steps to create a tabular report in ActiveReports Web Designer.

Note: This tutorial uses shared data set - CustomerOrders. The shared data sets and shared data sources can be viewed or modified in the Administrator Dashboard. For information on adding shared data sets, see Tutorial 7.1: Add Shared Data Set.

After you complete this tutorial, you will have a report that looks similar to the following.

Access the ActiveReports Web Designer and Add Data Set

  1. On the ActiveReports Server Report Portal, click Create report.
    The ActiveReports Web Designer opens in the new browser tab.    
  2. From top right corner of the Web Designer, click Data icon .
  3. Click Add and then from the shared data sets available, select CustomerOrders.
  4. Click Add. The CustomerOrders data set is added to the report.

Create Report Layout

  1. Drag and drop Table data region  onto the design area of the report. By default, you have a table with three rows and three columns.
  2. To add more columns to the table, click inside the table to display the column handle, and then click the plus sign.
      
    This adds one column to the table. Similarly, add another column to create a table with three rows and five columns.
          

Bind Data to Table Data Region

  1. To view fields in the added data set, click the drop-down next to the CustomerOrders data set.
  2. To fill the table with data, drag and drop the fields onto the columns of the details row.

    In our case, drag and drop the Title field on the first column, Country field on the second column, and so on as illustrated below. Also, in the Header row above the details row, enter the labels for the details.

      
  3. To remove the table footer, right-click the bottom row and select Remove Footer.
    Note: The Data Set Name property of the table is automatically set to CustomerOrders.

Sort Table Data

You can sort the table data of any field in ascending or descending order. Let us sort our table data by Price field in descending order.

  1. From the adorner on the right side of the table, select the Table1_DetailsGroup and go to the Sort Expressions property. 
  2. Click Show Items and then select Add Item.
  3. Click the radio button to display the fields and select the Price field to sort the table by price.

    Note: You can also enter a sort expression in the Expression Editor: Data - Sort Expressions dialog by selecting Expression...

  4. Click descending  icon to sort the Price field in descending order. You can change the sort order to ascending by clicking the ascending  icon (default).

Add Report Title

  1. Drag and drop a TextBox control  above the table. You may need to relocate the table to create space for the text box.
  2. Click inside the text box and enter the text 'Customer Orders Report'.

Customize Appearance of Tabular Report

Note: You may need to resize and reposition the controls on the report to accommodate data, and for a cleaner look.

  1. To apply borders to the table, select the Table data region and set the BORDER - Style property to Solid.
  2. To customize Header row of the table, set the following properties for all text boxes in the row. Set the same properties to customize the title of the report, that is, the text box containing text 'Customer Orders Report'.
    Property Value
    BACKGROUND - Color Plum
    TEXT - Font Weight Bold
    TEXT - Text Align Center
  3. To customize Details row of the table, select the cells in the details row by using Ctrl+Click and set the following properties.
    Property Value
    BORDER - Style Solid
    TEXT - Text Align
    (except for the text box with 'Title' field)
    Center

Preview and Save Report

  1. Click Preview  to view the final output of your report.
  2. Exit the preview mode by clicking Back on the left side of the designer.
  3. Switch to the File tab and click Save to open the Save dialog box. Enter the report name and click Save Report. You can also provide a description and a revision comment for the report.  

The reports created in the ActiveReports Web Designer are saved in the ActiveReports Server Report Portal under 'No Category'.