Web Designer
Get Started / Tutorial 2: Create Tabular Report
In This Topic
    Tutorial 2: Create Tabular Report
    In This Topic

    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. 

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

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

    An Example for Tabular Report

    Access the ActiveReports Web Designer

    Run the Web Designer sample (WebDesigner_MVC(Core)) that you can download from the following link:

    https://github.com/activereports/WebSamples15/tree/master/WebDesignerSamples

    The Web Designer is opened in browser ready to create your reports. By default you have a Blank RDL Report.

    Bind Data to Report

    1. Connect to a data source.
      1. Go to Data tab and click Add next to Data Sources.
      2. In the Data Source Editor dialog, fill-in the Name field as 'Customers'.
      3. Select Provider as 'JSON provider'.
      4. Select JSON Data Type as 'External File or URL'.
      5. Enter the following URL in JSON Document: https://demodata.grapecity.com/northwind/api/v1/Customers
      6. Test the datsource connection and click Add.
    2. Add a dataset.
      1. Click Add Data Set next to the added data source.
      2. In the Edit Data Set dialog, fill-in a dataset name and enter the Query: $.[*]
      3. Validate the query to obtain the bound fields and select OK to add the dataset.

    Create Data-bound Table

    Create Table data region

    1. Expand the dataset fields and enable Select Fields...   
    2. Select the required fields and drag-drop onto the design area.
         

    A table with its columns bound to the fields is created. The Header row above the details row is automatically filled with labels.

    Alternatively, you can first drag-drop the Table data region Table Toolbar Icon onto the design area of the report and then drag-drop fields onto the details row.

    Sort Table Data

    Apply sort on any field in the table data in ascending or descending order. Let us sort our table data by customerId field in descending order.

    1. From the adorner on the right side of the table, select <Details Group> and go to the Sort Expressions property.
      Textbox Control 
    2. Select Add Item.
    3. Click the radio button to display the fields and select the 'customerId' field.
      Sort Expression

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

    4. Click descending Sort Descending Icon icon to sort the 'customerId field' in descending order. You can change the sort order to ascending by clicking the ascending Sort Ascending Icon icon (default).

    Group Table Data

    You can organize the table data in groups to add more meaning to the table. Let us group the table with respect to country field such that our table displays unique country values.
    1. From the adorner on the right side of the Table data region, select <Details Group>, and go to the Properties pane.
    2. Next to the Group Expressions property, click Add Item.
    3. Click the radio button to display the fields and select the 'country' field.
      Group Expressions in Table

    Add Page Header

    1. Go to the Report tab on top of the designer and select Add Header option.
      Add Header to a Report
    2. Drag and drop a TextBox control Textbox Control in the header area.
    3. Click inside the text box and enter the text 'Customer Report'.

    Customize Appearance of Tabular Report

    An Example for Customized 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 customize the Page Header, set the BACKGROUND - Color property to '#f1f1f1'.
    2. Select the text box containing the text 'Customer Report' and set the following properties.
      Property Value
      TEXT - Color #3da7a8
      TEXT - Font Size 16pt                   
      TEXT - Text Align Left                    
      TEXT - Vertical Align  Middle

    3. To customize Header row of the table, set the following properties for all text boxes in the row.
      Property Value
      BORDER - Width  0.25pt
      BORDER - Style  Solid
      BORDER - Color  Gainsboro
      TEXT - Text Align Left
      TEXT - Vertical Align  Middle
    4. Similarly, customize the text boxes in the Details row of the table.

    Preview and Save Report

    1. Click Preview Preview Button to view the final output of your report.
    2. Exit the preview mode by clicking Back on the left side of the designer.
    3. Click Save to open the Save dialog box. Enter the report name and click Save Report