Embedded
Schedule Free DemoTry it Free
Search results
PDF

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.

  1. Open the html page that contains Report Viewer and its scripts.

  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

  3. 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/5.4.20/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.4.20/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/5.4.20/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/5.4.20/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/5.4.20/scripts/v2.0/common/bold.reports.common.min.js"></script>
        <script src="https://cdn.boldreports.com/5.4.20/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
        <script src="https://cdn.boldreports.com/5.4.20/scripts/v2.0/bold.report-viewer.min.js"></script>
    </head>
    <body>
       <script type="text/javascript">
                $(function () {
                    $("#viewer").boldReportViewer();
                });
            </script>
    </body>
</html>
Previous
Next