How to Hide the Alert Icon in the Bold Reports Report Viewer Toolbar
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 theboldReportViewer
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
andreportPath
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.