Pass Parameters from the Client to a Report in Angular Application

• Apr 10, 2021
• 4 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. A custom report storage - the ReportStorageWebExtension class descendant - implements 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 to modify 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. The code also passes parameter values on application start and modifies a parameter when the user clicks Submit in the Parameters panel.

View Example: How to Pass Parameters from the Angular Client to a Report

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>
  <dxrv-callbacks (CustomizeElements)="CustomizeElements($event)" 
                  (ParametersSubmitted)="ParametersSubmitted($event)"></dxrv-callbacks>
</dx-report-viewer>

report-viewer.ts

import { PreviewElements } from "devexpress-reporting/dx-webdocumentviewer"
import { Component, Inject, ViewEncapsulation, ViewChild, OnInit  } 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";
    invokeAction: string = '/DXXRDV';

    // Pass a parameter value by using a reportUrl on startup
    ngOnInit() {
        var parameterValue = "Hello World";
        this.reportUrl = "TestReport?parameter3=" + parameterValue;
    }

    // Pass a parameter value each time the report is submitted
    // Note: The value entered on the Parameters panel will be ignored
    ParametersSubmitted(event) {
        var parameterValue = 12345;
        event.args.Parameters.filter(function (p) { return p.Key == "parameter4"; })[0].Value = parameterValue;
    }

    // Pass a parameter value with a reportUrl
    setParameter1() {
        var parameterValue = 40;
        this.viewer.bindingSender.OpenReport(this.reportUrl + "&parameter1=" + parameterValue);
    }

    // Pass a parameter value with the parameters model
    // Note: This approach can be used only for parameters that have the Visible property enabled
    setParameter2() {
        var parameterValue = true;
        this.viewer.bindingSender.GetParametersModel()["parameter2"](parameterValue);
        this.viewer.bindingSender.StartBuild();
    }

    // (Optional) Hide the Parameters panel
    CustomizeElements(event) {
        var rightPanel = event.args.GetById(PreviewElements.RightPanel);
        var index = event.args.Elements.indexOf(rightPanel);
        event.args.Elements.splice(index, 1);
    }    

    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.Extensions;
using Microsoft.AspNetCore.Hosting;
using PassParameterExample.PredefinedReports;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace PassParameterExample.Services
{
    public class CustomReportStorageWebExtension : ReportStorageWebExtension
    {
        readonly string ReportDirectory;
        const string FileExtension = ".repx";
        public CustomReportStorageWebExtension(IWebHostEnvironment env) {
            ReportDirectory = Path.Combine(env.ContentRootPath, "Reports");
            if (!Directory.Exists(ReportDirectory)) {
                Directory.CreateDirectory(ReportDirectory);
            }
        }
        private bool IsWithinReportsFolder(string url, string folder) {
            var rootDirectory = new DirectoryInfo(folder);
            var fileInfo = new FileInfo(Path.Combine(folder, url));
            return fileInfo.Directory.FullName.ToLower().StartsWith(rootDirectory.FullName.ToLower());
        }
        public override bool CanSetData(string url) {return true;}
        public override bool IsValidUrl(string url) {return Path.GetFileName(url) == url;}
        public override byte[] GetData(string url) {
            try {
                string[] parts = url.Split("?");
                string reportName = parts[0];
                string parametersString = parts.Length > 1 ? parts[1] : String.Empty;
                XtraReport report = null;

                if (Directory.EnumerateFiles(ReportDirectory).
                    Select(Path.GetFileNameWithoutExtension).Contains(reportName)) 
                {
                    byte[] reportBytes = File.ReadAllBytes(
                        Path.Combine(ReportDirectory, reportName + FileExtension));
                    using (MemoryStream ms = new MemoryStream(reportBytes))
                        report = XtraReport.FromStream(ms);
                }
                if (ReportsFactory.Reports.ContainsKey(reportName)) {
                    report = ReportsFactory.Reports[reportName]();
                }

                if (report != null) {
                    // Assign parameters here
                    var parameters = HttpUtility.ParseQueryString(parametersString);
                    foreach (string parameterName in parameters.AllKeys) {
                        report.Parameters[parameterName].Value = Convert.ChangeType(
                            parameters.Get(parameterName), report.Parameters[parameterName].Type);
                    }
                    report.RequestParameters = false;

                    using (MemoryStream ms = new MemoryStream()) {
                        report.SaveLayoutToXml(ms);
                        return ms.ToArray();
                    }
                }
            }
            catch (Exception ex) {
                throw new DevExpress.XtraReports.Web.ClientControls.FaultException(
                    "Could not get report data.", ex);
            }
            throw new DevExpress.XtraReports.Web.ClientControls.FaultException(
                string.Format("Could not find report '{0}'.", url));
        }

        public override Dictionary<string, string> GetUrls() {
            return Directory.GetFiles(ReportDirectory, "*" + FileExtension)
                                     .Select(Path.GetFileNameWithoutExtension)
                                     .Union(ReportsFactory.Reports.Select(x => x.Key))
                                     .ToDictionary<string, string>(x => x);
        }
        public override void SetData(XtraReport report, string url) {
            if (!IsWithinReportsFolder(url, ReportDirectory))
                throw new DevExpress.XtraReports.Web.ClientControls.FaultException("Invalid report name.");
            report.SaveLayoutToXml(Path.Combine(ReportDirectory, url + FileExtension));
        }
        public override string SetNewData(XtraReport report, string defaultUrl) {
            SetData(report, defaultUrl);
            return defaultUrl;
        }
    }
}