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

    When you want to separate the details from the master report, you can create two separate reports and embed the detail report in the master report using Subreport control. A parameter is passed from the master report to detail report to filter the details.

    Caution: Semantic reports created using legacy Flash designer cannot be used as Subreport in Web Designer.

    What You Will Learn

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

    Note: This tutorial uses SalesByRegion data set.

    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/WebSamples14/tree/master/WebDesignerSamples

    The Web Designer is opened in browser ready to create your reports.

    Create Master Report Layout

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

    1. Drag and drop List data region List Toolbar Icon onto the design area of the report.
    2. Drag and drop two TextBox controls, TextBox1 onto the list and TextBox2 above the list.
    3. Drag and 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 follows. This can be viewed in Explorer by clicking Report Explorer Icon .
      An image showing hierarchy of controls using Report Explorer

    Add Parameter to the Master Report

    Let us add the parameter that will be passed to the detail report to display the details accordingly.

    1. From the top right corner of Web Designer, click the Data icon Data Icon.
    2. Click Add next to Parameters. A parameter named Parameter1 is added.
    3. Click Parameter1 to edit parameter properties. You can change the Prompt to a more understandable text, such as 'Enter region name'.
      The following image shows how these properties are set:

      Editing properties for Parameter1
    4. Go to From Query tab under Available Values and set the following properties.
      Property Value
      Data Set Name SalesByRegion
      Value Field Region
      Label Field Region

      The following image shows how these properties are set:
      Properties for Parameter1 set in 'From Query' tab

    Note: The name of the parameter in master report and detail report (subreport) should be same.

    Bind Data to the Report Controls

    1. Select TextBox1 and enter the expression ="Store ID: "& Fields!Store.Value.
    2. Select TextBox2 and enter the expression ="Details for region: "&Parameters!Parameter1.Value.
    3. Set the Data Set Name property of the List data region to the SalesByRegion data set.

    Configure Subreport

    Let us embed the report created in Tutorial 3: Create Parameterized Report as a detail report and pass the parameter as filter to the detail report data from the master report.

    1. To embed the detail report to master report,

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

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

    4. From the Properties pane, go to Parameters property.
    5. Click Show Items and then select Add Item.
    6. Click Filter Property Icon to view the parameter properties.
    7. Set the Parameter Name property to Parameter1.
    8. Click the radio button next to Value and select Expression... to open the Expression Editor:Value dialog box.
    9. Double-click Parameter1 from the Parameters field so that =Parameters!Parameter1.Value is entered as expression.
      The following image shows how these properties are set:

      Parameter Properties for Parameter1
    10. Click Save.

      To use the parameter (Parameter2) as filter to store values,

    11. Similar to above steps, add another parameter.
    12. Set the Parameter Name property to Parameter2.
    13. Set the Value to =Fields!Store.Value expression.
      The following image shows how these properties are set:

      Parameter Properties for Parameter2
    14. Click Save.
      The Parameters property of Subreport control now shows two parameters as shown.
      Parameter Properties for Parameters 1 and 2

    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 'Customer Orders (Master Detail Report)'.

    Customize the Appearance of Master 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. To customize the text boxes with information on store id and details for region,

    2. Select TextBox1 and TextBox2, one at a time.
    3. From the Properties pane, set TEXT - Text Align property to Center.
    4. Set BACKGROUND - Color to Plum from the colors available on Web color pallet.

      To customize the title,

    5. Select the text box with title.
    6. From the Properties pane, set TEXT - Text Align property to Center.
    7. Set BACKGROUND - Color property to Plum from the colors available on Web color pallet.
    8. Set TEXT - Font Weight property to Bold.

    Preview and Save Master Report

    1. Click Preview Preview Button to view your report in the final output. You will be prompted to select the region name.
    2. Select a region and see how the details are filtered.
    3. Exit the preview mode by clicking Back on the left side of the designer.
    4. Click Save to open the Save dialog box. Enter the report name as 'Master Report' and click Save Report
    See Also