How to Retrieve Parameter Metadata in Bold Report Designer with React

The Bold Reports Designer application allows you to access report parameter metadata, such as name, data type, and hidden status using the previewReport event. This event is triggered when the Preview button is clicked in the Report Designer, allowing dynamic retrieval of parameter details before the report is rendered. This functionality streamlines development workflows by enabling dynamic access to parameter details before report preview.

To get started, refer to our React Report Designer help documentation for instructions on creating a new report designer application.

How to Achieve Parameter Metadata

1. To retrieve parameter metadata, handle the previewReport event in your React application as shown in the code snippet below:

function App() {
 // Handler for the previewReport event
 const handlePreviewReport = (args) => {
   var reportviewerObj = $("#designer").data("boldReportDesigner");
   alert(JSON.stringify(reportviewerObj.rptParameter.parameters, null, 2));
 };

 return (
   <div style={designerStyle}>
     <BoldReportDesignerComponent
       id="designer"
       serviceUrl={'https://demos.boldreports.com/services/api/ReportingAPI'}
       previewReport={handlePreviewReport}>
     </BoldReportDesignerComponent>
   </div>
 );
} 

2. After implementing the previewReport event handler, click the Preview button in the Report Designer interface. The parameter metadata details will be displayed in a formatted JSON string via an alert pop-up, showing details such as: parameter names, types, and hidden status.
   
   

By using the previewReport event in the Bold Reports Designer application, you can retrieve report parameter metadata details when the preview button is clicked. This capability allows developers to dynamically access and process parameter details before preview, enabling more efficient and tailored report design workflows.