How to use Events to Interact with Reports

This tutorial explains how to quickly get started with the Bold Reports® Web Report Viewer in a JavaScript-based web application. The video walks through creating a basic HTML application, configuring the Report Viewer, and loading a report from the server.

Create the Viewer Container

First, add a container element to the HTML page where the Report Viewer will be rendered.

<div id="report-viewer"></div>

Initialize the Report Viewer

Initialize the Web Report Viewer by providing the required configuration options such as the Report Server URL, Report Service URL, and Report Path.

<script>
    $(function () {
        $("#report-viewer").boldReportViewer({
            reportServerUrl: "https://demo.boldreports.com/reporting",
            reportServiceUrl: "https://demo.boldreports.com/reporting/api/ReportViewer",
            reportPath: "/Sample Reports/Sales Report"
        });
    });
</script>

Load a Report from Report Server

The report specified in the reportPath property will be rendered automatically once the viewer is initialized and connected to the Report Server.

$("#report-viewer").boldReportViewer({
    reportPath: "/Sample Reports/Sales Report"
});

Enable Report Interaction

The Web Report Viewer allows users to interact with the report using built-in features such as paging, zooming, exporting, and printing without additional configuration.

$("#report-viewer").boldReportViewer({
    enableToolbar: true
});

Complete Example

Below is a simple complete example of loading a report using the Web Report Viewer.

<!DOCTYPE html>
<html>
<head>
    <title>Web Report Viewer</title>
</head>
<body>
    <div id="report-viewer"></div>

    <script>
        $(function () {
            $("#report-viewer").boldReportViewer({
                reportServerUrl: "https://demo.boldreports.com/reporting",
                reportServiceUrl: "https://demo.boldreports.com/reporting/api/ReportViewer",
                reportPath: "/Sample Reports/Sales Report"
            });
        });
    </script>
</body>
</html>

Summary

By following these steps, you can quickly embed the Bold Reports® Web Report Viewer into a web application and render reports hosted on the Report Server. This setup forms the foundation for further customization using events, parameters, and toolbar options.

To get started quickly with Report Viewer, you can check this video: