Search results
Suggest a FeaturePDF

Migrate to Report Designer v2.0 component

This section provides simple step-by-step instructions to update your existing Report Designer component to latest v2.0 component.

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

  2. Remove the following older CSS references from the page.

    • bold.reports.all.min.css
    • bold.reportdesigner.min.css
  3. Remove the following older script references from the page.

    • 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
  4. 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/6.1.34/content/v2.0/tailwind-light/bold.report-designer.min.css" rel="stylesheet" />
    
        <!-- Report Designer component dependent scripts -->
        <script src="https://cdn.boldreports.com/6.1.34/scripts/v2.0/common/bold.reports.common.min.js"></script>
        <script src="https://cdn.boldreports.com/6.1.34/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
    
        <!-- Report Viewer and Designer component scripts -->
        <script src="https://cdn.boldreports.com/6.1.34/scripts/v2.0/bold.report-viewer.min.js"></script>
        <script src="https://cdn.boldreports.com/6.1.34/scripts/v2.0/bold.report-designer.min.js"></script>

The final updated html page for v2.0 Report Designer appears like this.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <link href="https://cdn.boldreports.com/6.1.34/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/6.1.34/scripts/v2.0/common/bold.reports.common.min.js"></script>
            <script src="https://cdn.boldreports.com/6.1.34/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

            <!-- Report Viewer and Designer component scripts -->  
            <script src="https://cdn.boldreports.com/6.1.34/scripts/v2.0/bold.report-viewer.min.js"></script>
            <script src="https://cdn.boldreports.com/6.1.34/scripts/v2.0/bold.report-designer.min.js"></script>
        </head>
        <body>
        <script type="text/javascript">
                $(function () {
                    $("#designer").boldReportDesigner();
                });
                </script>
        </body>
    </html>