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

    Parameters in reports are used to filter the data based on certain criteria. You can either prompt users to enter parameters so that they have control on the final output, or supply the parameters behind the scenes. This tutorial guides you through the steps to add parameters and use them as prompts before displaying the final output.

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

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

    An Example for Parameterized Report

    The parameters selected on preview are - Parameter1 = RJ and Parameter2 = HANAR as shown:

    Parameter Prompt

    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, fill-in the Name field as 'Orders'.
      3. Select Provider as 'JSON provider'.
      4. Select JSON Data Type as 'External File or URL'.
      5. Enter the following URL in the in JSON Document: https://demodata.grapecity.com/northwind/odata/v1/Orders
      6. Test the datsource connection and click Add.
    2. Add a dataset.
      1. Click Add Data Set for 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 obtain the bound fields and select OK to add the dataset.

    Create Data-bound Table

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

    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.

    Add Parameter to the Report


    Let us add two parameters that will act as filters to retrieve data - one parameter will be used as a filter for the ship region, and the other will be used as a filter for customer id.

    To add a report parameter that filters the data based on the ship region,

    1. From the top right corner of the Report Designer, click the Data icon Data Icon.
    2. Click Add next to Parameters. A parameter, Parameter1 is added.
    3. Click Parameter1 to edit parameter properties.
    4. Set the Data Type property to 'String'.
      Properties Pane for Parameter1
    5. Select From Query and set the following properties.
      Property Value
      Data Set Name Orders
      Value Field ShipRegion
      Label Field ShipRegion

      The following image shows how these properties are set:
      Available values for Parameter1
      To add a parameter that filters the data based on the customer id,
    6. From the top right corner of the Report Designer, click the Data icon Data Icon.
    7. Click Add next to Parameters, a parameter Parameter2 is added.
    8. Click Parameter2 to edit its properties.
    9. Set the Data Type property to 'String'.
      Properties Pane for Parameter2
    10. Select From Query and set the following properties.
      Property Value
      Data Set Name Orders
      Value Field CustomerId
      Label Field CustomerId

      The following image shows how these properties are set:
      Available values for Parameter2

    The Parameters property now shows two parameters.

    Available values for Parameter2   

    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 ship region parameter (Parameter1),
      Filter for Parameter1

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

      Similarly, to add filter that limits the data according to customer id parameter (Parameter2), set 'Parameter2' as the filter value for the CustomerId field.

      Filter for Parameter2

    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 Orders Report'.

    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. Set the text alignments using TEXT - Text Align (Center) and TEXT - Vertical Text Align (Middle) properties.
    2. Set a Background Color for Page Header and Header row of the table (#f1f1f1).
    3. Set a font using the Font Family property (Song).
    4. Set the color for the text in the page header using TEXT - Color property (#3da7a8).
    5. Set the TEXT - Font Size for the text in the page header (16pt) and the text in the table (8pt).
    6. Set the border properties for the textboxes in the table - Border - Width (0.25pt), Border - Style (Solid), and Border - Color (Gainsboro).

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