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

1. 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.

2. Define Parameter Details
   Create an object to specify the parameter details, including name, labels, values, and nullable properties. This object will be passed to the previewOptions property of the BoldReportDesignerComponent.

3. Implement the React Component
   Update your App.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;
   

   4. Run the Application
      After updating App.js, start your React application by running: npm run start. The Report Designer will load with the SalesOrderNumber parameter pre-filled with the value SO50759.

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 the parameters 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.