How to use Rendering and Report Events in Bold Reports^®

This tutorial provides a comprehensive guide on implementing and managing Report Viewer events within Bold Reports^® for JavaScript-based web applications. The video demonstrates how to enhance report interactivity by hooking into specific life cycle stages of the report generation process.

Key Events Explained

Rendering Begin

Triggered immediately before the report starts to render, useful for pre-processing tasks or user notifications.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        renderingBegin: function (args) {
            // Write a code block to perform any operation before rendering begins.
        }
    });
</script>

Rendering Complete

Executes once the backend finishes generating the report, ideal for post-rendering operations.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        reportExport: function (args) {
            // Write a code block to perform any operation before exporting the report.
        }
    });
</script>

Implementation Workflow

Environment Setup

Create a standard web project folder and an index.html file. Include the required Bold Reports^® JavaScript and CSS references.

Component Initialization

Add a container element and initialize the Report Viewer using the necessary configuration properties such as service URL, report path, server URL, and authorization token.

Event Integration

Attach custom JavaScript functions to the Report Viewer events to track and control report behavior during rendering, exporting, canceling, and toolbar initialization.

If you want more details about Rendering and Report Events, you can check this video:

How to use Rendering and Report Events in Bold Reports®