How to Pass Parameters to Bold Reports Designer in a React Application
In Bold Reports, you can pass predefined parameter values from a React application to the Report Designer using the previewOptions
property. This feature allows you to set parameter values programmatically, enabling seamless report generation and preview within the designer.
This guide demonstrates how to pass a SalesOrderNumber
parameter with the value SO50759
to the Report Designer in a React application.
Steps to Pass Parameters to Report Designer
-
Set Up the React Application
Ensure your React application is configured with the Bold Reports Report Designer component (version 5.2.xx or higher). Refer to the React Report Designer integration guide for setup instructions, including prerequisites like Node.js, npm, and the@boldreports/react-reporting-components
package. -
Define Parameter Details
Create an object to specify the parameter details, includingname
,labels
,values
, andnullable
properties. This object will be passed to thepreviewOptions
property of theBoldReportDesignerComponent
. -
Implement the React Component
Update yourApp.js
file to include the Report Designer component with the specified parameter details. Here’s a complete example:/* eslint-disable */ import React from 'react'; import './App.css'; // Report Designer component styles import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css'; // Report Designer component dependent scripts import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min'; import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min'; // Report Viewer and Designer component scripts import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min'; import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min'; // Reports React base import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min'; // Define parameter details const parameterDetails = { parameters: [ { name: "SalesOrderNumber", // Parameter name labels: ["SO50759"], // Display label values: ["SO50759"], // Parameter value nullable: false // Disallow null values } ] }; function App() { // Styling for the Report Designer container const designerStyle = { height: '700px', width: '100%' }; return ( <div style={designerStyle} className="App"> {/* Bold Report Designer Component */} <BoldReportDesignerComponent id="reportdesigner_container" serviceUrl="https://demos.boldreports.com/services/api/ReportingAPI" previewOptions={parameterDetails} > </BoldReportDesignerComponent> </div> ); } export default App;
- Run the Application
After updatingApp.js
, start your React application by running:npm run start
. The Report Designer will load with theSalesOrderNumber
parameter pre-filled with the valueSO50759
.
- Run the Application
Key Properties Explained
-
parameters
: An array of objects specifying the details of each parameter passed to the Report Designer:name
: The unique identifier for the parameter (e.g.,SalesOrderNumber
).labels
: The display text shown in the Report Designer UI for the parameter (e.g.,["SO50759"]
).values
: The actual values assigned to the parameter for report generation (e.g.,["SO50759"]
).nullable
: A Boolean indicating whether the parameter can accept null values (e.g.,false
for required).
-
serviceUrl
: The URL of the Web API service endpoint used for report processing (e.g.,https://demos.boldreports.com/services/api/ReportingAPI
). -
previewOptions
: An object that includes theparameters
array, enabling the passing of parameter details to the Report Designer during preview mode (see Preview Options API).
Preview Snapshot
The image below illustrates the Report Designer with the SalesOrderNumber
parameter set to SO50759
:
Sample Application
Download a complete React Report Designer sample application with the SalesOrderNumber
parameter configured from this link.