Report parameters

To set report parameters in the Bold Reports^® Blazor Report Viewer, pass the default values at run time with the [parameters] property. You can set the report parameters while creating the Report Viewer control in a script or in the Web API Controller.

This tutorial uses the sales-order-dtail.rdl report. Download the sales order detail report.

How do I set a parameter on the client side?

To set a parameter on the client side of the Blazor Report Viewer, create a parameter class, add the parameter values in the Pages/Index.razor file, and pass them to the parameters property in the boldreports-interop.js file.

Create a class with the following code to hold the RDL report rendering properties.

namespace BlazorReportingTools.Data
{
    public class BoldReportParameter
    {
        public string Name { get; set; }
        public List <string> Values { get; set; }
        public string popupWidth { get; set; }
        public string popupHeight { get; set; }
        public DateTime minDateTime { get; set; }
        public DateTime maxDateTime { get; set; }
        public string itemWidth  { get; set; }
        public string labelWidth  { get; set; }
    }
}

Set the default value data to the [values] property and name of the report parameter to the [name] property.

> The parameter name is case sensitive, it should be same as available in the report definition

Inject IJSRuntime and invoke this JavaScript interop with the sales-order-detail.rdl report and the created BoldReportsAPI URL in the Pages/Index.razor file to visualize the report using our viewer.

[Pages/Index.razor]

 // index.razor file to pass a parameters
@code {
    // ReportViewer options
    BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();

    // Used to render the Bold Report Viewer component in Blazor page.
    public async void RenderReportViewer()
    {
            BoldReportParameter parameter = new BoldReportParameter();
            viewerOptions.Parameters = new List<BoldReportParameter>();
            parameter.Name = "SalesOrderNumber";
            parameter.Values = new List<string>();
            parameter.Values.Add("SO50753");
            viewerOptions.Parameters.Add(parameter);
            await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }
}

Add a Parameter in boldreports-interop.js file inside the wwwroot/scripts folder and use the following code snippet to invoke the Bold Report Viewer JavaScript control.

// Interop file to render the Bold Report Viewer component with properties.
window.BoldReports = {
   RenderViewer: function (elementID, reportViewerOptions) {
       $("#" + elementID).boldReportViewer
       ({
           reportPath: reportViewerOptions.reportName,
           reportServiceUrl: reportViewerOptions.serviceURL,
           parameters: reportViewerOptions.parameters
       });
   }
}

How do I set parameters in the Web API controller?

To set a parameter default value for the Blazor Report Viewer in the Web API controller, use the following code in the OnReportLoaded method.

[NonAction]
public void OnReportLoaded(ReportViewerOptions reportOption)
{
    List<BoldReports.Web.ReportParameter> userParameters = new List<BoldReports.Web.ReportParameter>();
    userParameters.Add(new BoldReports.Web.ReportParameter()
    {
        Name = "SalesOrderNumber",
        Values = new List<string>() { "SO50756" }
    });
    reportOption.ReportModel.Parameters = userParameters;
}

The report parameter name is case sensitive.

How do I get the report parameters?

To get the report parameters used in a report, call the ReportHelper class methods in the Blazor Report Viewer Web API controller. The following helper methods get parameters with or without values.

Methods	Description
GetParameters	Returns the parameters that are used in the current report without the processed values.
GetParametersWithValues	Returns the report parameters with processed data values that are used in the current report.
You can use the following code sample to get parameter names and set parameter default values.

    public class ReportsApiController : ApiController, IReportController
    {
        Dictionary<string, object> jsonArray = null;
        public object PostReportAction(Dictionary<string, object> jsonResult)
        {
            jsonArray = jsonResult;
            return ReportHelper.ProcessReport(jsonResult, this,_cache);
        }
        ....
        [NonAction]
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            var reportParameters = ReportHelper.GetParameters(jsonArray, this,_cache);
            List<BoldReports.Web.ReportParameter> modifiedParameters = new List<BoldReports.Web.ReportParameter>();
            if (reportParameters != null)
            {
                foreach (var rptParameter in reportParameters)
                {
                    modifiedParameters.Add(new BoldReports.Web.ReportParameter()
                    {
                        Name = rptParameter.Name,
                        Values = new List<string>() { "SO50756" }
                    });
                }
                reportOption.ReportModel.Parameters = modifiedParameters;
            }
        }
    }

How do I set a date range for a date parameter?

To set a date range for date parameters in the Blazor Report Viewer, use the minDateTime and maxDateTime properties in the parameterSettings.

Property	Description
`minDateTime`	Specify minimum range value of a date parameter
`maxDateTime`	Specify maximum range value of a date parameter

Refer to the following code sample to set date and time value to be display, using the Report Viewer component API’s.

*Create a Properties inside Data/BoldReportParameter.cs class

 // index.razor file to pass a parameters

    public async void RenderReportViewer()
    {
            BoldReportParameter parameter = new BoldReportParameter();
            viewerOptions.Parameters = new List<BoldReportParameter>();
            parameter.minDateTime="3/1/2003";
            parameter.maxDateTime="4/30/2003";
            await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }

// Interop file to render the Bold Report Viewer component with properties.
window.BoldReports = {
   RenderViewer: function (elementID, reportViewerOptions) {
       $("#" + elementID).boldReportViewer({
           reportPath: reportViewerOptions.reportName,
           reportServiceUrl: reportViewerOptions.serviceURL,
           parameterSettings: {
                minDateTime:reportViewerOptions.minDateTime,
                maxDateTime:reportViewerOptions.maxDateTime,
           }
       });
   }
}

How do I set the date and time display format for a date parameter?

To set the date and time format that the DateTimePicker control displays for date parameters in the Blazor Report Viewer, use the [dateTimeFormat] and [timeDisplayFormat] properties in the parameterSettings.

Format	Display in DateTimePicker
`Short Date and Time - d/M/yy h:mm tt`	`9/12/2014 2:04 PM`
`Medium Date - d MMM yy h:mm tt`	`12 Sep 14 2:04: PM`
`Full Date and short time - dddd, MMMM dd, yyyy HH:mm tt`	`Friday, September 12,2014 2:04 PM`
`Full Date and Long Time - dddd, MMMM dd, yyyy HH:mm:ss tt`	`Friday, September 12,2014 2:04:00 PM`
`UTC - yyyy-MM-dThh:mm:ssz`	`2014-09-12T2:04:00+5`

Refer to the following code sample to set date and time value to be display, using the Report Viewer component API’s.

index.html

    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>

The preceding code sets date and time value to be display for all the date parameters used in the report.

To set different date and time value to be display for each date parameter used in the report, register the event beforeParameterAdd and specify date and time value based on parameter name as in the following code sample.

beforeparameteradd.html

    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="beforeparameteradd.js"></script>
    </body>

How do I change the parameter drop-down height and width?

To change the height and width of the parameter drop-down in the Blazor Report Viewer parameter panel, use the parameterSettings property.

     // index.razor file to pass a parameters
    public async void RenderReportViewer()
    {
           BoldReportParameter parameter = new BoldReportParameter();
            viewerOptions.Parameters = new List<BoldReportParameter>();
            parameter.popupHeight="150px";
            parameter.popupWidth="250px";
            await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }

// Interop file to render the Bold Report Viewer component with properties.
window.BoldReports = {
   RenderViewer: function (elementID, reportViewerOptions) {
       $("#" + elementID).boldReportViewer({
           reportPath: reportViewerOptions.reportName,
           reportServiceUrl: reportViewerOptions.serviceURL,
           parameterSettings: {
               popupHeight: reportViewerOptions.popupHeight,
               popupWidth: reportViewerOptions.popupWidth,
           }
       });
   }
}

How do I hide the parameter scroller?

To hide the scrollbar in the Blazor Report Viewer parameter panel, use the enableparameterblockscroller property.

// Interop file to render the Bold Report Viewer component with properties.
window.BoldReports = {
   RenderViewer: function (elementID, reportViewerOptions) {
       $("#" + elementID).boldReportViewer({
           enableParameterBlockScroller: false
       });
   }
}

How do I hide the parameter pane on load?

To hide or show the parameter block in the Blazor Report Viewer, use the parameterSettings property.

// Interop file to render the Bold Report Viewer component with properties.
window.BoldReports = {
   RenderViewer: function (elementID, reportViewerOptions) {
       $("#" + elementID).boldReportViewer({
           parameterSettings: { hideParameterBlock: true}
       });
   }
}

How do I change the parameter item width and label width?

To change the parameter item width and label width in the Blazor Report Viewer, use the parameterSettings property.

 // index.razor file to pass a parameters

    public async void RenderReportViewer()
    {
            BoldReportParameter parameter = new BoldReportParameter();
            viewerOptions.Parameters = new List<BoldReportParameter>();
            parameter.itemWidth="250px";
            parameter.labelWidth="auto"
            await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }

// Interop file to render the Bold Report Viewer component with properties.
window.BoldReports = {
   RenderViewer: function (elementID, reportViewerOptions) {
       $("#" + elementID).boldReportViewer({
           reportPath: reportViewerOptions.reportName,
           reportServiceUrl: reportViewerOptions.serviceURL,
           parameterSettings: parameterSettings: {
               itemWidth: reportViewerOptions.itemWidth,
               labelWidth: reportViewerOptions.labelWidth,
           }
   }
}

How do I access hidden or internal parameter information?

To expose the hidden or internal report parameter information used in a report to the user, set the accessInternalValue property in the Blazor Report Viewer parameterSettings.

// Interop file to render the Bold Report Viewer component with properties.
window.BoldReports = {
   RenderViewer: function (elementID, reportViewerOptions) {
       $("#" + elementID).boldReportViewer({
          parameterSettings:{ accessInternalValue: true }
       });
   }
}

How do I set report parameter visibility in the Web API controller?

To show or hide a parameter at the top of the Blazor Report Viewer panel, set the Hidden property of ReportParameter in the Web API controller. The following code example shows hiding a report parameter in the Web API controller’s OnReportLoaded method.

    [NonAction]
    public void OnReportLoaded(ReportViewerOptions reportOption)
    {
        var reportParameters = ReportHelper.GetParameters(jsonArray, this,_cache);
        List<BoldReports.Web.ReportParameter> modifiedParameters = new List<BoldReports.Web.ReportParameter>();
        if (reportParameters != null)
        {
            foreach (var rptParameter in reportParameters)
            {
                modifiedParameters.Add(new BoldReports.Web.ReportParameter()
                {
                    Name = rptParameter.Name,
                    Hidden = true
                });
            }
            reportOption.ReportModel.Parameters = modifiedParameters;
        }
    }