How to Hide the Alert Icon in the Bold Reports Report Viewer Toolbar

Published:

Updated:

This guide provides instructions on customizing the Bold Reports Report Viewer toolbar to hide the alert icon through the use of the toolbarSettings property in JavaScript. This optimization improves the user experience by simplifying the interface, reducing unnecessary interactions, while maintaining essential functionalities. This feature is available in Bold Reports version V6.3.31 and later.

Toolbar After Hiding Alert Icon:

Uses and Benefits

Improved User Experience: Display only relevant toolbar options for a cleaner interface.
Enhanced Control: Restrict access to specific features for security or design purposes.
Streamlined Interface: Reduce visual clutter, making the Report Viewer more intuitive for end-users.

Steps to Hide the Alert Icon

Step 1: Set Up the HTML File

Create or open an HTML file (e.g., index.html) in your project directory.
Include the necessary Bold Reports Report Viewer scripts and CSS via CDN, along with jQuery (required for Bold Reports).
Add a <div> element to host the Report Viewer.
Initialize the Report Viewer with custom toolbarSettings to hide the alert icon.

Step 2: Configure the Toolbar

In the <script> tag, initialize the Report Viewer using the boldReportViewer method.

Set the toolbarSettings property to exclude the alert icon while keeping other toolbar items:

toolbarSettings: { items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.AlertIcon }

Specify the reportServiceUrl and reportPath for your report.

Example Code:

<script type="text/javascript">
    $(function () {
        $("#viewer").boldReportViewer({
            reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
            reportPath: "~/Resources/docs/sales-order-detail.rdl",
            toolbarSettings: { items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.AlertIcon }
        });
    });
</script>

Step 3: Save and Run the Application

Save the HTML file.
Host the file on a web server (e.g., using a local server like http-server or a production server) or open it directly in a browser if CORS is not an issue.
Verify that the Report Viewer loads with the toolbar, excluding the alert icon.

Complete HTML Example

Below is a complete index.html file implementing the alert icon customization:

<!DOCTYPE html>
<html>
<head>
    <title>Bold Reports Report Viewer - Hide Alert Icon</title>
    <meta charset="utf-8" />
    <link href="https://cdn.boldreports.com/6.3.31/content/bold.reports.material.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.boldreports.com/6.3.31/scripts/common/bold.reports.all.min.js"></script>
    <script src="https://cdn.boldreports.com/6.3.31/scripts/bold.report-viewer.min.js"></script>
</head>
<body>
    <div id="viewer" style="width: 100%; height: 600px;"></div>
    <script type="text/javascript">
        $(function () {
            $("#viewer").boldReportViewer({
                reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                reportPath: "~/Resources/docs/sales-order-detail.rdl",
                toolbarSettings: { items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.AlertIcon }
            });
        });
    </script>
</body>
</html>

Output

Before Customization

The Report Viewer toolbar includes the alert icon alongside other toolbar items.

After Customization

The alert icon is removed, and the toolbar displays only the required items.

Other Customizable Toolbar Items

The ej.ReportViewer.ToolbarItems enum allows for further customizations. Additional configurable items include:

Export (export to formats like PDF, Excel)
Print (print button)
Refresh (refresh report data)
Zoom (zoom controls)
PageNavigation (page navigation controls)

Example to hide both alert icon and print button:

toolbarSettings: { items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.AlertIcon & ~ej.ReportViewer.ToolbarItems.Print }

Conclusion

Hiding the alert icon in the Bold Reports Report Viewer toolbar results in a streamlined and user-friendly interface. By following these steps and leveraging the toolbarSettings property, you can efficiently remove unnecessary elements while maintaining essential functionalities. This customization, available in Bold Reports version V6.3.31 and later, enhances the reporting experience for end-users.

Was this article useful?

Dislike

Comments (0)