How to use Click and Parameter Events in React Application

This tutorial explains how to handle click actions and customize report parameters in the Bold Reports^® Web Report Viewer. The video demonstrates how developers can intercept the View Report button click and modify parameter elements before the report rendering process begins.

View Report Click

Fires when the View Report button is clicked. This event allows you to validate or modify parameter values before rendering the report. You can also cancel report rendering based on custom logic.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        viewReportClick: function (args) {
            // Write a code block to perform any action
            // when the View Report button is clicked.
            // args.parameters returns the parameter collection.
            // args.cancel = true; // Cancels report rendering.
        }
    });
</script>

Before Parameter Add

Fires when the report viewer starts adding a parameter element to the parameter block. This event enables customization of parameter UI elements, default values, or behaviors before they are rendered.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        beforeParameterAdd: function (args) {
            // Write a code block to modify the report parameter element
            // before it is added to the parameter block.
        }
    });
</script>

Implementation Workflow

Click Handling

Use the viewReportClick event to intercept the View Report action and apply parameter validation or conditional logic before rendering.

Parameter Customization

Use the beforeParameterAdd event to customize parameter appearance, behavior, or values dynamically.

If you want more details about Click and Parameter Events, you can check this video: