Category / Section
How to Apply Material Themes to Bold Reports Report Viewer v2.0 Component
Published:
Updated:
In Bold Reports, you can apply different themes to enhance the visual appeal of your reports. This article will guide you on how to apply the Material Light and Material Dark themes using their respective CDN links in the Report Viewer v2.0 component.
Material Light Theme
To apply the Material Light theme, use the following CDN link:
<link href="https://cdn.boldreports.com/5.3.9/content/v2.0/material-light/bold.report-viewer.min.css" rel="stylesheet" />
Material Dark Theme
To apply the Material Dark theme, use the following CDN link:
<link href="https://cdn.boldreports.com/5.3.9/content/v2.0/material-dark/bold.report-viewer.min.css" rel="stylesheet" />
The final updated HTML page for v2.0 Report Viewer Material Light theme looks as follows:
<html>
<head>
<title>Report Viewer first HTML page</title>
<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/5.3.9/content/v2.0/material-light/bold.report-viewer.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Report Viewer component dependent script -->
<script src="https://cdn.boldreports.com/5.3.9/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/5.3.9/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/5.3.9/scripts/v2.0/bold.report-viewer.min.js"></script>
</head>
<body>
<div style="height: 600px; width: 1000px;">
<!-- Creating a div tag which will act as a container for boldReportViewer widget.-->
<div style="height: 600px; width: 1000px; min-height: 400px;" id="viewer"></div>
<!-- Setting property and initializing boldReportViewer widget.-->
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl'
});
});
</script>
</div>
</body>
</html>
Kindly refer to the following screenshot of the output for your reference.
The Embedded JavaScript Report Viewer sample has been attached with the above changes.
Note: The Bold Report Viewer v2.0 component Material theme is available in version 5.3.8 and higher.
See Also
- For Tailwind Light theme, refer to the following link.
