Articles in this section
Category / Section

How to Pass Parameters to Bold Reports Designer in a React Application

Published:
Updated:

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;
    
    1. 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:
Parameter Preview

Sample Application

Download a complete React Report Designer sample application with the SalesOrderNumber parameter configured from this link.

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied