How to Apply Material Themes to the Bold Reports Report Designer

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 stylesheets in the Report Designer v2.0 component.

Material Light Theme

To apply the Material Light theme, use the following CDN link:

<link href="https://cdn.boldreports.com/5.4.23/content/v2.0/material-light/bold.report-designer.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.4.23/content/v2.0/material-dark/bold.report-designer.min.css" rel="stylesheet" />

The completed sample of the JavaScript HTML page for v2.0 Report Designer Material Light theme appears as follows:

<html>

<head>
   <title>Report Designer first HTML page</title>
	
	<!-- Report Designer component styles -->
    <link href="https://cdn.boldreports.com/5.4.23/content/v2.0/material-light/bold.report-designer.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
	<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/vb/vb.min.js" type="text/javascript"></script>

	<!-- Report Designer component dependent scripts -->
    <script src="https://cdn.boldreports.com/5.4.23/scripts/v2.0/common/bold.reports.common.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.23/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

    <!-- Report Viewer and Designer component scripts -->  
    <script src="https://cdn.boldreports.com/5.4.23/scripts/v2.0/bold.report-viewer.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.23/scripts/v2.0/bold.report-designer.min.js"></script>

</head>

<body>

    <!-- Creating a div tag which will act as a container for boldReportDesigner widget.-->
    <div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
    <script type="text/javascript">
        $(function () {
            $("#designer").boldReportDesigner({
                serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI"
            });
        });
    </script>

</body>

</html>

Preview snapshot of the Material Light theme:

Preview snapshot of the Material Dark theme:

The Embedded JavaScript Report Designer sample with the above changes is prepared. You can download the sample application from here.

Note: The Bold Report Designer Material Light and Material Dark themes are only used for v2.0 components, and this feature is available in version 5.3.12 and higher.

How to Apply Material Themes to the Bold Reports Report Designer

Material Light Theme

Material Dark Theme

See Also

Access denied