Web Designer
Get Started / Tutorial 4: Create Master-Detail Report using Subreport
In This Topic
    Tutorial 4: Create Master-Detail Report using Subreport
    In This Topic

    A Master Detail report is simply a report with related data, separated into master data and detail data. The separation of detail data from master data is accomplished by grouping detail data in a data region or by creating a separate detail report and embedding it using subreport.

    A master-detail report can be created by using Subreport control. The Subreport control is embedded into the master report which acts as a placeholder for the details report. A parameter passed from the master report to the details report filters the details for each instance of master record and renders the record. Note that there should be a common field in the two reports to establish the master-detail relationship. This field is used to filter data in the details report based on the parameter passed from the master report.

    This tutorial guides you through the steps to create a Master-detail report using subreport in ActiveReports Web Designer.

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

    An Example for Master Detail Report using a Subreport

    (Parameter1 = Canada West)

    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.

    Create Details Report (Subreport)

    We will first create report that displays the order details for employees in a tabular form.

    Bind Data to Report

    1. Connect to a data source.

      1. Go to the Data tab and click Add next to the Data Sources.

      2. In the Data Source Editor dialog, fill-in the Name field.

      3. Select Provider as 'JSON provider'.

      4. Select JSON Data Type as 'External File or URL'.

      5. Enter the following URL in JSON Documenthttps://demodata.grapecity.com/northwind/odata/v1/Orders

      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: $.value[*].            

      3. Validate the query to retrieve fields and select OK to add the dataset.

    Create Data-bound Table

    1. Expand the dataset fields and enable Select Fields...

      Selecting dataset fields

    2. Select the fields required in the table and drag-drop onto the design area.

      Table with selected fields

      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 onto the design area of the report and then populate the data by dragging and dropping the fields onto the details row.
    In the footer row of the table, in the extreme right cell, enter the following expression {Sum(Freight)}. Your table should now look as shown.

    Table Footer Showing Aggregate

    Add Parameter to the Report

    Let us add a hidden parameter to the details report. This parameter will be passed form the master report to filter the data in the details report.

    To add a report parameter that filters the data based on the employee id,

    1. Go to the Data tab. and click Add next to 'Parameters'. A parameter, Parameter1 is added.

    2. Click Parameter1 to edit parameter properties.

    3. Set the Data Type property to 'Integer'.

    4. Enable the Hidden property for the parameter to 'True'.

      Parameter properties

    Manage Data in the Report

    We want the data in the details report to filter according to the employee id parameter passed from the master report.
    To filter data according to the employee id parameter (Parameter1),

    Filter for Parameter1

    1. Select the table and go to Properties pane.
    2. In the Filters property, click + Add to specify the filter conditions.
    3. Select the All Of.
    4. Click the + Add to display the fields and then select the 'EmployeeId' field as the filter criteria.
    5. Set the corresponding filter value for the 'EmployeeId' field equal to 'Parameter1'.    

    Create Master-Detail Report

    Bind Data to Report

    1. Create a new report. By default, you get a Blank RDL Report.

    2. Connect to a data source.

      1. Go to the Data tab and click Add next to Data Sources.

      2. In the Data Source Editor dialog, fill-in the Name field.

      3. Select Provider as 'JSON provider'.

      4. Select JSON Data Type as 'External File or URL'.

      5. Enter the following URL in JSON Documenthttps://demodata.grapecity.com/northwind/odata/v1/Employees

      6. Test the datsource connection and click Add. 

    3. 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: $.value[*].

      3. Validate the query to retrieve fields and select OK to add the dataset.

    Create Master Report Layout

    To create the master report, we will use the List data region. The List data region will contain TextBox controls to display the data, and a Subreport control to embed details report. The List data region repeats any report control it contains for every record in the dataset.

    1. Drag-drop List data region List Toolbar Icon onto the design area of the report.

    2. We want employees' name, title, city, and country information in the master report. To display this information, drag-drop three TextBox controls onto the list.

    3. We also want to embed details report in the master report. For this, drag-drop the Subreport Subreport Toolbar Icon control onto the list. Arrange the controls such that the report now looks like the following.
      An image showing the arrangement of controls on the designer area

      Verify that the hierarchy of the controls added in the report is as shown. This can be viewed in Explorer Report Explorer Icon.

      An image showing the hierarchy of controls using Report Explorer

    Bind Data to the Report Controls

    Report Explorer Icon

    1. Select TextBox1 and enter the expression Name: {FirstName} {LastName}
    2. Select TextBox2 and enter the expression Title: {Title}
    3. Select TextBox3 and enter the expression {City}, {Country}.

    Configure Subreport

    To embed the details report to the master report,

    1. Select Subreport control.
    2. From the Properties pane, set the Report Name property to the detail report's name.

    To use the parameter (Parameter1) passed from the master report to the detail report as a filter, set the parameter properties of Subreport control as follows.

    1. From the Properties pane, go to Report Parameters property and select Add Item.
      A parameter, 'Parameter1' is added.

    2. In the Value field, enter the following expression {EmployeeId}.

      The subreport's report parameter will now look similar to the following.

      Report Parameter for Subreport

      Note: The parameter name in details report must match the parameter in the subreport.

    Add Title

    1. Drag and drop a TextBox control Textbox Toolbar Icon above the List data region. If required, relocate the table to create space for the text box.
    2. Click inside the text box and enter the text 'Employee Orders Report (Master-Detail Report)'.

    Customize the Appearance of Master-Detail Report

    Customized Master Report with Subreport

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

    1. Set the text alignments using TEXT - Text Align (Left, Right, Center, etc.) and TEXT - Vertical Text Align (Top, Middle, or Bottom) properties.

    2. Set a background color for Page Header using the Background - Color property (#f1f1f1).

    3. Set a font using the Text - Font Family property (Song).

    4. Set the TEXT - Font Size for the text in page header (16pt) and Text - Font Color for the font color (#3da7a8).

    Preview and Save Report

    1. Click Preview to view your report in the final output. See how the parameter passed from master report obtains the details using the subreport control.

    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 as 'Master Report' and click Save Report.