How to Retrieve Parameter Metadata Using JavaScript in Bold Report Designer

Published:

Updated:

The Bold Reports Designer application allows you to access report parameter metadata, including names, data types, default values, available values, and nullability 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 feature streamlines development workflows by allowing access to parameter information at runtime.

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

Implementation

To retrieve parameter metadata, handle the previewReport event in your JavaScript application as shown in the following code snippet:

$(function () {
   $("#designer").boldReportDesigner({
       serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI",
       previewReport: function (args) {
           var reportviewerObj = $("#designer").data("boldReportDesigner");
           alert(JSON.stringify(reportviewerObj.rptParameter.parameters, null, 2));
       }
   });
});

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

The following is a complete example of an HTML file that demonstrates how to implement the previewReport event customization.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
   <title>Report Viewer first HTML page</title>
           
   <!-- Report Designer component styles -->
   <link href="https://cdn.boldreports.com/10.1.11/content/v2.0/tailwind-light/bold.report-designer.min.css" rel="stylesheet" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/vb/vb.min.js" type="text/javascript"></script>

   <!-- Report Designer component dependent scripts -->
   <script src="https://cdn.boldreports.com/10.1.11/scripts/v2.0/common/bold.reports.common.min.js"></script>
   <script src="https://cdn.boldreports.com/10.1.11/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

   <!-- Report Viewer and Designer component scripts -->
   <script src="https://cdn.boldreports.com/10.1.11/scripts/v2.0/bold.report-viewer.min.js"></script>
   <script src="https://cdn.boldreports.com/10.1.11/scripts/v2.0/bold.report-designer.min.js"></script>
</head>
<body>        
   <!-- Creating a div tag which will act as a container for boldReportDesigner widget.-->
   <div style="height: 800px; width: 100%; min-height: 400px;" id="designer"></div>
   <script type="text/javascript">
       $(function () {
           $("#designer").boldReportDesigner({
               serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI",
               previewReport: function (args) {
                   var reportviewerObj = $("#designer").data("boldReportDesigner");
                   alert(JSON.stringify(reportviewerObj.rptParameter.parameters, null, 2));
               }
           });
       }); 
   </script>
</body>
</html>

By using the previewReport event in the Bold Reports Designer application, you can retrieve report parameter metadata when the Preview button is clicked. This feature enables developers to dynamically access and process parameter details before rendering the report, allowing for more efficient and customized report design workflows.

You can download a sample report for reference here.

Was this article useful?

Dislike

Comments (0)

How to Retrieve Parameter Metadata Using JavaScript in Bold Report Designer

Implementation

Access denied