Report parameters

To set report parameters in the Bold Reports^® React 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 Detail.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, pass a JSON array with the parameter details to the React Report Viewer parameters property.

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, and it should be same as available in the report definition.

The following code example illustrates how to set a report parameter in the script.

var parameters = [{
            name: 'SalesOrderNumber',
            labels: ['SO50751'],
            values: ['SO50751'],
            nullable: false
            }];

function App() {
    return (<div id="viewer" style={viewerStyle}>
    <BoldReportViewerComponent id="reportviewer-container"
    reportServiceUrl = {'https://demos.boldreports.com/services/api/ReportViewer'}
    reportPath = { 'Sales Order Detail.rdl' }
    parameters = {parameters}
    >
    </BoldReportViewerComponent>
    </div>);
  }

Build and run the application.

How do I set parameters in the Web API controller?

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

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;
}

Report parameter names are 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 React Report Viewer Web API controller. The following helper methods get parameters with or without values.

Methods	Description
GetParameters	Returns the parameters 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);
        }

        ....
        [NonAction]
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            var reportParameters = ReportHelper.GetParameters(jsonArray, this);
            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 change the parameter drop-down height and width?

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

var parameterSettings = {
    popupHeight: "200px",
    popupWidth: "50px",
}

function App() {
    return ( <div className = "App" >
        <BoldReportViewerComponent id = "reportviewer-container"
        parameterSettings = { parameterSettings} >
        </BoldReportViewerComponent>  </div>
    );
}

How do I hide the parameter scroller?

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

 <BoldReportViewerComponent id = "reportviewer-container"
 enableParameterBlockScroller = { false} >
     </BoldReportViewerComponent>

How do I hide the parameter pane on load?

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

var parameterSettings = {
    hideParameterBlock: true
}

function App() {
    return ( <div className = "App" >
        <BoldReportViewerComponent id = "reportviewer-container"
        parameterSettings = { parameterSettings }>
        </BoldReportViewerComponent>  </div>
    );
}

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

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

var parameterSettings = {
               itemWidth: '250px',
               labelWidth: 'auto'
               }

function App() {
    return ( <div className = "App" >
        <BoldReportViewerComponent id = "reportviewer-container"
        parameterSettings = { parameterSettings }>
        </BoldReportViewerComponent>  </div>
    );
}

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

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

var parameterSettings = {
  minDateTime: new Date("4/5/2003"),
  maxDateTime: new Date("6/15/2003"),
};

function App() {
    return ( <div className = "App" >
        <BoldReportViewerComponent id = "reportviewer-container"
        parameterSettings = { parameterSettings} >
        </BoldReportViewerComponent>  </div>
    );
}

The preceding code sets the date range for all the date parameters used in the report.

To set a different date range for each date parameter used in the report, register the beforeParameterAdd event and specify the range based on the parameter name, as in the following code sample.

function App() {
  return (
    <div id="viewer" style={viewerStyle}>
      <BoldReportViewerComponent
        id="reportviewer-container"
        reportServiceUrl={"https://demos.boldreports.com/services/api/ReportViewer"}
        reportPath={"~/Resources/demos/Report/product-line-sales.rdl"}
        beforeParameterAdd={onBeforeParameterAdd}>
     </BoldReportViewerComponent>
     </div>);
   }

function onBeforeParameterAdd(event) {
  event.parameterSettings.dateTimePickerType = "DateTime";
  if (event.parameterModel.Name === "StartDate") {
    event.parameterSettings.minDateTime = new Date("4/5/2003 5:00:00 AM");
    event.parameterSettings.maxDateTime = new Date("4/15/2003 5:00:00 AM");
  }
  if (event.parameterModel.Name === "EndDate") {
    event.parameterSettings.minDateTime = new Date("5/10/2003 5:00:00 AM");
    event.parameterSettings.maxDateTime = new Date("5/20/2003 5:00:00 AM");
  }
}

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 React 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`

var parameterSettings = {
  dateTimePickerType: "DateTime",
  dateTimeFormat: "MM/dd/yyyy h:mm tt",
  timeDisplayFormat: "HH:mm",
  timeInterval: 60,
};

function App() {
    return ( <div className = "App" >
        <BoldReportViewerComponent id = "reportviewer-container"
        parameterSettings = { parameterSettings }>
        </BoldReportViewerComponent>  </div>
    );
}

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

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

function App() {
  return (
    <div id="viewer" style={viewerStyle}>
      <BoldReportViewerComponent
        id="reportviewer-container"
        reportServiceUrl={"https://demos.boldreports.com/services/api/ReportViewer"}
        reportPath={"~/Resources/demos/Report/product-line-sales.rdl"}
        beforeParameterAdd={onBeforeParameterAdd}>
     </BoldReportViewerComponent>
     </div>);
   }

function onBeforeParameterAdd(event) {
  event.parameterSettings.dateTimePickerType = "DateTime";
  if (event.parameterModel.Name === "StartDate") {
    event.parameterSettings.dateTimeFormat = "MM/dd/yyyy h:mm tt";
    event.parameterSettings.timeDisplayFormat = "HH:mm";
    event.parameterSettings.timeInterval = 60;
  }
  if (event.parameterModel.Name === "EndDate") {
    event.parameterSettings.dateTimeFormat = "MM/dd/yyyy h:mm tt";
    event.parameterSettings.timeDisplayFormat = "HH:mm";
    event.parameterSettings.timeInterval = 60;
  }
}

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 React Report Viewer parameterSettings.

var parameterSettings = {
    accessInternalValue: true
}

function App() {
    return ( <div className = "App" >
        <BoldReportViewerComponent id = "reportviewer-container"
        parameterSettings = { parameterSettings }>
        </BoldReportViewerComponent>  </div>
    );
}

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

To show or hide a parameter at the top of the React 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);
        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;
        }
    }