Web Designer
Get Started / Tutorial 3: Create Parameterized Report
In This Topic
    Tutorial 3: Create Parameterized Report
    In This Topic

    ActiveReports allows you to use parameters to filter or add the data to display in reports at run time. You can either prompt users for parameters so that they control the output, or supply the parameters behind the scenes.

    This tutorial guides you through the steps to create a parameterized report 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 Parameterized Report

    (Parameter1 = Canada West and Parameter2 = 1005)

    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 Report Layout 

    Let us use Table data region to the display data. Drag and drop Table data region Table Toolbar Icon onto the design area of the report.
    A table with three rows and columns

    Bind Data to Table Data Region

    1. To view fields in the added data set, click the dropdown next to the SalesByRegion data set.
    2. To fill the table with data, drag and drop the fields onto the columns of the detail row.
      In our case, drag and drop the SaleDate field on the first column, Quantity field on the second column, and Profit field on the third column. The Header row above the details row is automatically filled with labels.
      Binding the data to table data region
    3. To remove the table footer, right-click the bottom row and select Remove Footer.

    Add Parameter to the Report

    Let us add two parameters that would act as filters for data retrieved from the data source, one would be passed as filter for the region, and the other to filter the data according to store.

    1. To add a report parameter that filters the data according to the region,

    2. From the top right corner of Web Designer, click the Data icon Data Icon.
    3. Click Add next to Parameters. A parameter named Parameter1 is added.
    4. Click Parameter1 to edit parameter properties.
    5. Set Data Type property to String.
      The following image shows how these properties are set:

      Properties Pane for Parameter1
    6. Go to From query tab 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:

      Setting the properties in 'From Query' for Parameter1
      To add parameter that filters the data according to the store,

    7. From the top right corner of Web Designer, click the Data icon Data Icon.
    8. Click Add next to Parameters. A parameter named Parameter2 is added.
    9. Click Parameter2 to edit parameter properties.
    10. Set Data Type property to Integer.

      The following image shows how these properties are set:
      Properties Pane for Parameter2
    11. Go to From query tab and set the following properties.
      Property Value
      Data Set Name SalesByRegion
      Value Field Store
      Label Field Store

      The following image shows how these properties are set:

       Setting the properties in 'From Query' for Parameter2
      The Parameters property now shows the two parameters as follows.

       Parameter Pane showing parameters 1 and 2

    Manage Data in the Report

    In order to control the amount of data rendered in the report, we can add filters to the Table data region. In our report, we will be adding two filters as follows.

    1. To add filter that renders data according to the user input in the parameter (Parameter1),
      Filter for Parameter1

    2. Select the table and go to Properties pane.
    3. In the Filters property, click Show Items, and then select Add Item.
    4. Click Filter Property Icon to display the filter properties.
    5. Click the radio button next to Filter Expression to display the fields and select Region.
    6. Click the drop down next to Operator and select 'Equal'.
    7. Click the radio button next to Value and enter the expression =Parameters!Parameter1.Value.

      To add filter that limits the data according to store parameter (Parameter2),
      Filter for Parameter2

    8. In the Filters property, click Show Items, and then select Add Item.
    9. Click Filter Property Icon to display the filter properties.
    10. Click the radio button next to Filter Expression to display the fields and select Store.
    11. Click the drop down next to Operator and select 'Equal'.
    12. Click the radio button next to Value and enter the expression =Parameters!Parameter2.Value.
      The Filters property now shows the two filters as follows.

      Filter Pane showing filters 1 and 2

    Customize the Appearance of Parameterized Report

    Customized Parameterized 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 background color to the table, select the Table data region.
    2. Set the BACKGROUND - Color property to Light Yellow from the colors available on Web tab of the color pallet.
    3. To customize the Header row of the table, set the following properties for each text box in the row.
      Property Value
      TEXT - Font Weight Bold
      Setting the text font weight property for the textboxes in the Properties panel
      TEXT - Text Align Center
      Setting the text alignment property for the textboxes in the Properties panel
    4. To customize the Details row of the table, set the TEXT - Text Align property for each text box to Center.
    5. To apply borders, select each cell of the table and set its BORDER - Style property to Solid.

    Preview and Save Report

    1. Click Preview Preview Button to view your report in the final output. You will be prompted to select the region name and the store id.
      Note: The values in the Parameter list are not sorted. To sort the values in the Parameter list, you need to have sorted data set.
    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 'Detail Report' and click Save Report.