Migrate to Report Viewer v2.0 component
This section provides simple step-by-step instructions to update your existing Report Viewer application to our latest modern v2.0 scripts, styles and components.
-
Open the html page that contains Report Viewer and its scripts.
-
Remove the following older scripts and CSS references from the page.
bold.reports.all.min.cssjquery.min.jsej2-base.min.jsej2-data.min.jsej2-pdf-export.min.jsej2-svg-base.min.jsej2-lineargauge.min.jsej2-circulargauge.min.jsej2-maps.min.jsej.chart.min.jsbold.reports.common.min.jsbold.reports.widgets.min.jsbold.report-viewer.min.js
-
Add the following v2.0 scripts and CSS references in the <head> tag of the html page.
<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/13.1.26/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
<!-- Report Viewer component dependent script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/13.1.26/scripts/v2.0/bold.report-viewer.min.js"></script>The final updated html page for v2.0 Report Viewer, looks as follows.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://cdn.boldreports.com/13.1.26/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/v2.0/bold.report-viewer.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer();
});
</script>
</body>
</html>