How to Migrate Your Existing Bold Report Viewer to Bold Report Viewer v2.0 Component

Published:

Updated:

In the Bold Reports UI, the new v2.0 Report Viewer has been modernized, enhancing the overall look and feel of the Bold Report Viewer. The steps below will guide you through the process of migrating your existing Bold Report Viewer to the Bold Report Viewer v2.0 component in the JavaScript Platform.

Step 1: Open the HTML page that contains the Bold Report Viewer and its scripts.

Step 2: Remove the following older scripts and CSS references from the page.

bold.reports.all.min.css
jquery.min.js
ej2-base.min.js
ej2-data.min.js
ej2-pdf-export.min.js
ej2-svg-base.min.js
ej2-lineargauge.min.js
ej2-circulargauge.min.js
ej2-maps.min.js
ej.chart.min.js
bold.reports.common.min.js
bold.reports.widgets.min.js
bold.report-viewer.min.js

Step 3: Add the following v2.0 CSS and script references in the <head> tag of the HTML page.

<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/5.3.8/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>

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

<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/5.3.8/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>
          <!-- Report Viewer component styles -->
          <link href="https://cdn.boldreports.com/5.3.8/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>
          
          <!-- Report Viewer component dependent script -->
          <script src="https://cdn.boldreports.com/5.3.8/scripts/v2.0/common/bold.reports.common.min.js"></script>
          <script src="https://cdn.boldreports.com/5.3.8/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
          
          <!-- Report Viewer component script -->
          <script src="https://cdn.boldreports.com/5.3.8/scripts/v2.0/bold.report-viewer.min.js"></script>
      </head>
      <body>
          <div id="viewer" style="width: 100%;height: 950px"></div>
          <script type="text/javascript">
              $(function () {
                  $("#viewer").boldReportViewer({
                      reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                      reportPath: '~/Resources/docs/sales-order-detail.rdl'
                  });
              });
          </script>
      </body>
  </html>

How to Migrate Your Existing Bold Report Viewer to Bold Report Viewer v2.0 Component

See Also

Access denied