Pass Parameters from the Client to a Report

• Dec 20, 2020
• 3 minutes to read

You can use different methods to send parameters from the client side to the report displayed in the Document Viewer.

The first method constructs the report URL that includes the parameter as a query string and uses this URL to open a report. The report’s URL is passed to the ReportStorageWebExtension.GetData method at the server. You can implement and register a custom storage with the GetData method that parses the URL string, extracts the parameter values, creates a report, sets the report parameters and returns the report to the sender.

Another method uses the client-side JSReportViewer.GetParametersModel method that provides access to the report parameter model. When parameters are modified, a call to the JSReportViewer.StartBuild method is required to rebuild the document.

The following code creates two buttons to show the methods described above.

Note

The complete sample project is available in the following DevExpress Examples repository on GitHub: How to Pass Parameters from the Angular Client to a Report.

Angular

 

report-viewer.html

<div>
    <button style="margin:5px" (click)="setParameter1()"><span>Set Parameter1</span></button>
    <button style="margin:5px" (click)="setParameter2()"><span>Set Parameter2</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 } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './report-viewer.html',
    styleUrls: [
        "../../../node_modules/jquery-ui/themes/base/all.css",
        "../../../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 = "TestReport?parameter1=3";
    invokeAction: string = '/DXXRDV';

    setParameter1() {
        this.viewer.bindingSender.OpenReport("TestReport?parameter1=40");
    }
    setParameter2() {
        var parameterValue = true;
        this.viewer.bindingSender.GetParametersModel()["parameter2"](parameterValue);
        this.viewer.bindingSender.StartBuild();
    }

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

The GetData method parses the string to extract parameters and assign them to the report:

CustomStorageWebExtension.cs

using DevExpress.XtraReports.UI;
using DevExpress.XtraReports.Web.ClientControls;
using System;
using System.IO;
using System.Linq;


public class CustomReportStorageWebExtension : DevExpress.XtraReports.Web.Extensions.ReportStorageWebExtension
{
    readonly string ReportDirectory;
    const string FileExtension = ".repx";
    // ...
    public override byte[] GetData(string url)
    {
        string reportName = url.Substring(0, url.IndexOf("?"));
        string paramName = url.Substring(url.IndexOf("?") + 1, url.IndexOf("=") - (url.IndexOf("?") + 1));
        string paramValue = url.Substring(url.IndexOf("=") + 1);
        try
        {
            if (Directory.EnumerateFiles(ReportDirectory).
                Select(Path.GetFileNameWithoutExtension).
                Contains(reportName))
            {
                string path = Path.Combine(ReportDirectory, reportName + FileExtension);
                return File.ReadAllBytes(path);
            }
            if (ReportsFactory.Reports.ContainsKey(reportName))
            {
                using (MemoryStream ms = new MemoryStream())
                {
                    XtraReport report = ReportsFactory.Reports[reportName]();
                    report.Parameters[paramName].Value = paramValue;
                    report.Parameters[paramName].Visible = true;
                    report.RequestParameters = false;
                    report.SaveLayoutToXml(ms);
                    return ms.ToArray();
                }
            }
        }
        catch (Exception ex)
        {
            throw new FaultException("Could not get report data.", ex);
        }
        throw new FaultException(string.Format("Could not find report '{0}'.", url));
    }
    // ...
}