Passing Parameter Values to the Report Viewer in a Blazor Application

Bold Reports enables interactive reporting by passing parameter values to the Report Viewer from code, allowing seamless integration of customized report rendering within applications. Embedding a report in a web application and programmatically passing parameters, such as a user ID or a date range, helps tailor the report content based on user context or preferences. This article outlines the steps required to transmit parameter values to the Report Viewer for precise, dynamic report rendering.

Steps to Pass Parameters to the Report Viewer

Step 1. Define Report Parameters in Your Application

Use the BoldReportViewerOptions class to configure report parameters in the BoldReportViewerOptions.cs file. Below is an example implementation:

    public class BoldReportViewerOptions
    {
        public string ReportPath { get; set; }
        public string ServiceURL { get; set; }

        public List<BoldReportParameter> Parameters { get; set; }
    }

    public class BoldReportParameter
    {
        public string Name { get; set; }
        public List<object>  Values { get; set; }
   
    }

Code Snippet	Description
`public List<BoldReportParameter> Parameters { get; set; }`	Gets or sets the list of report parameters.
`public class BoldReportParameter`	Defines an individual report parameter.
`public string Name { get; set; }`	Gets or sets the parameter name.
`public List<object> Values { get; set; }`	Gets or sets the parameter values (supports multiple data types).

Step 2. Assign Parameter Values in the Razor Page

In your Home Razor page, assign parameter values to the BoldReportViewerOptions instance to pass them to the Report Viewer as shown below:

BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();

   public async void RenderReportViewer()
   {

       viewerOptions.ReportPath = "Test.rdl";
       viewerOptions.ServiceURL = "/api/BoldReportsAPI";
       viewerOptions.Parameters = new List<BoldReportParameter>();


       // For integer values
       BoldReportParameter parameterInt = new BoldReportParameter();
       parameterInt.Name = "OpportunityID";
       parameterInt.Values = new List<object>(); 
       parameterInt.Values.Add(123); // Add integer value
       viewerOptions.Parameters.Add(parameterInt);


       // For string values
       BoldReportParameter parameterString = new BoldReportParameter();
       parameterString.Name = "ReportParameter2";
       parameterString.Values = new List<object>(); 
       parameterString.Values.Add("SO50753");
       viewerOptions.Parameters.Add(parameterString);
   

       await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
   }

Code Snippet	Description
`viewerOptions.Parameters = new List<BoldReportParameter>();`	Initializes an empty parameter list.
`BoldReportParameter parameterInt = new BoldReportParameter();`	Creates a parameter instance for `OpportunityID`.
`parameterInt.Name = "OpportunityID";`	Names the parameter `OpportunityID`.
`parameterInt.Values = new List<object>(); parameterInt.Values.Add(123);`	Adds integer value `123` to `OpportunityID` parameter.
`viewerOptions.Parameters.Add(parameterInt);`	Adds `OpportunityID` parameter to the parameters list.
`BoldReportParameter parameterString = new BoldReportParameter();`	Creates a parameter instance for `ReportParameter2`.
`parameterString.Name = "ReportParameter2";`	Names the parameter `ReportParameter2`.
`parameterString.Values = new List<object>(); parameterString.Values.Add("SO50753");`	Adds string value `SO50753` to `ReportParameter2` parameter.
`viewerOptions.Parameters.Add(parameterString);`	Adds `ReportParameter2` parameter to the parameters list.
`await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);`	Asynchronously calls JavaScript to render the report in the `report-viewer` element using `viewerOptions`.

Step 3. Modify the JavaScript File for Rendering Parameters

Open the boldreports-interop.js file and ensure the RenderViewer function is updated to include the parameter values for the Report Viewer.

RenderViewer: function (elementID, reportViewerOptions) { 
    $("#" + elementID).boldReportViewer({ 
        reportPath: reportViewerOptions.reportName, 
        reportServiceUrl: reportViewerOptions.serviceURL, 
        parameters: reportViewerOptions.parameters 
    }); 
}

Code Snippet	Description
`parameters: reportViewerOptions.parameters`	Sets the list of parameters for dynamic report rendering from `reportViewerOptions`.

Preview

Conclusion

Passing parameters to the Report Viewer in Bold Reports enables tailored, dynamic report generation, improving user interactivity and data relevance. By assigning parameter values in the Razor page, you can efficiently transmit parameters to customize reports based on user-specific input.

Download the above sample application from here.