Specify Parameter Values in an Angular Reporting Application

• Feb 23, 2024
• 4 minutes to read

Use the Parameters Panel

Open the Parameters Panel and use its editors to specify parameter values. Click Submit to apply the values to the report and display the document.

Use Custom UI Elements

You can create custom UI elements and use them to submit parameter values to the report.

To apply the values to the report, create a string that contains the report name and the submitted values, and pass this string to the viewer’s OpenReport method.

The example below demonstrates how to do the following:

1. Create a page with a document viewer, editor, and button.
2. Create a string with the report name and a value from the editor, and pass this string to the viewer’s OpenReport method on a button click.

View Example

report-viewer.html

<div>
    <input #paramValue type="text" />
    <button (click)="submitParameter()"><span>Submit</span></button>
</div>

<dx-report-viewer [reportUrl]="reportUrl" height="800px">
    <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
</dx-report-viewer>

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild, ElementRef } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './report-viewer.html',
    styleUrls: [
        "../../../node_modules/devextreme/dist/css/dx.common.css",
        "../../../node_modules/devextreme/dist/css/dx.light.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
        "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
    ]
})

export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false })
    viewer!: DxReportViewerComponent;
    @ViewChild('paramValue', { static: false })
    public paramValue!: ElementRef;
    reportUrl: string = "XtraReport1";
    invokeAction: string = '/DXXRDV';

    submitParameter() {
        var parameterValue = this.paramValue.nativeElement.value;
        this.viewer.bindingSender.OpenReport(this.reportUrl + "?strParam=" + parameterValue);
    }

    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

When you call the viewer’s OpenReport method, the reporting engine executes a report name resolution service. This service creates a report instance and returns it to the viewer. Implement this service to apply the parameter values to the report. The string argument from the OpenReport method is passed to the service’s method that returns a report instance. In this method, do the following:

1. Parse the string argument to extract the report name and parameter values.

2. Create a report instance and apply the parameter values to it. Reference each parameter by name in the report’s Parameters collection and assign the value to the parameter’s Value property.

3. If you want custom UI elements to be the only way to submit parameter values, hide the Parameters Panel. To do this, disable the Visible property for all report parameters. If you want users to submit parameter values from both the panel and custom UI elements, disable the report’s RequestParameters property.

4. Return the report instance.

The example below applies parameter values to a report in the IReportProvider service’s GetReport method.

CustomReportProvider.cs

using DevExpress.XtraReports.Services;
using DevExpress.XtraReports.UI;
using ReportingWebApp.PredefinedReports;
using System;
using System.Web;

namespace ReportingWebApp.Services {
    public class CustomReportProvider : IReportProvider {
        public XtraReport GetReport(string id, ReportProviderContext context) {
            // Parse the string with the report name and parameter values.
            string[] parts = id.Split('?');
            string reportName = parts[0];
            string parametersQueryString = parts.Length > 1 ? parts[1] : String.Empty;

            // Create a report instance.
            XtraReport report = null;

            if (reportName == "XtraReport1") {
                report = new XtraReport1();
            } else {
                throw new DevExpress.XtraReports.Web.ClientControls.FaultException(
                    string.Format("Could not find report '{0}'.", reportName)
                );
            }

            // Apply the parameter values to the report.
            var parameters = HttpUtility.ParseQueryString(parametersQueryString);

            foreach (string parameterName in parameters.AllKeys) {
                report.Parameters[parameterName].Value = Convert.ChangeType(
                    parameters.Get(parameterName), report.Parameters[parameterName].Type);
            }

            // Disable the Visible property for all report parameters
            // to hide the Parameters Panel in the viewer.
            foreach (var parameter in report.Parameters) {
                parameter.Visible = false;
            }

            // If you do not hide the panel, disable the report's RequestParameters property.
            // report.RequestParameters = false;

            return report;
        }
    }
}

Handle the ParametersInitialized Event

The example below handles the ParametersInitialized(String) event to do the following:

1. Initialize values of a visible and invisible parameter before the viewer loads the document.
2. Change a parameter value in the panel’s editor when a user assigns a value to another parameter.

View Example

report-viewer.html

<dx-report-viewer [reportUrl]="reportUrl" height="800px">
    <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
    <dxrv-callbacks (ParametersInitialized)="OnParametersInitialized($event)"></dxrv-callbacks>
</dx-report-viewer>

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './report-viewer.html',
    styleUrls: [
        "../../../node_modules/devextreme/dist/css/dx.common.css",
        "../../../node_modules/devextreme/dist/css/dx.light.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
        "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
    ]
})

export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false })
    viewer!: DxReportViewerComponent;
    reportUrl: string = "XtraReport1";
    invokeAction: string = '/DXXRDV';

    OnParametersInitialized(event: any) {
        // Specify an invisible integer parameter's value on viewer initialization.
        var invisibleIntParamValue = 42;
        var intParam = event.args.ActualParametersInfo.filter(
            (x: any) => x.parameterDescriptor.name == "intParam")[0];
        intParam.value = invisibleIntParamValue;

        // Specify a visible Boolean parameter's value on viewer initialization.
        var visibleBooleanParamValue = true;
        var booleanParam = event.args.ActualParametersInfo.filter(
            (x: any) => x.parameterDescriptor.name == "booleanParam")[0];
        booleanParam.value = visibleBooleanParamValue;

        // Update a string parameter value when a user changes the Boolean parameter value.
        var strParam = event.args.ActualParametersInfo.filter(
            (x: any) => x.parameterDescriptor.name == "strParam")[0];

        booleanParam && booleanParam.events.on('propertyChanged', (args: any) => {
            if (args.propertyName === 'value') {
                strParam.value = args.newVal.toString();
            }
        });

        intParam & booleanParam & strParam && event.args.Submit();
    }

    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}