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

Published:

Updated:

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

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

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

bold.reports.all.min.css
bold.reportdesigner.min.css
jsrender.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-designer-widgets.min.js
bold.report-viewer.min.js
bold.report-designer.min.js

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

  <!-- Report Designer component styles -->
  <link href="https://cdn.boldreports.com/5.3.8/content/v2.0/tailwind-light/bold.report-designer.min.css" rel="stylesheet" />

  <!-- Report Designer component dependent scripts -->
  <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 and Designer component scripts -->
  <script src="https://cdn.boldreports.com/5.3.8/scripts/v2.0/bold.report-viewer.min.js"></script>
  <script src="https://cdn.boldreports.com/5.3.8/scripts/v2.0/bold.report-designer.min.js"></script>

The final updated HTML page for v2.0 Report Designer looks as follows.

 <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <head>
          <link href="https://cdn.boldreports.com/5.3.8/content/v2.0/tailwind-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://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.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 and Designer component scripts -->  
          <script src="https://cdn.boldreports.com/5.3.8/scripts/v2.0/bold.report-viewer.min.js"></script>
          <script src="https://cdn.boldreports.com/5.3.8/scripts/v2.0/bold.report-designer.min.js"></script>
      </head>
      </head>
      <body>
          <div id="viewer" style="width: 100%;height: 950px"></div>
          <script type="text/javascript">
              $(function () {
                  $("#designer").boldReportDesigner({
                      serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI"
                  });
              });
          </script>
      </body>
  </html>

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

See Also

Access denied