Migrate to Report Designer v2.0 component in React Boilerplate application

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

This section explains migration steps to migrate Bold Report Designer version lesser than v5.2.xx to v5.2.xx and above.

  1. Open the app\index.html file.

  2. Remove the following script references from the app\index.html file.

    • 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

  3. Open the app/app.js file.

  4. Remove the following Report Designer component older CSS references.

    • bold.reports.all.min.css
    • bold.reportdesigner.min.css

  5. Remove the following Report Designer component older script references.

    • ej.bulletgraph.min
    • ej.chart.min
    • bold.report-viewer.min
    • bold.report-designer.min

  6. Add the following v2.0 CSS and script references.

    • \v2.0\tailwind-light\bold.report-designer.min.css
    • \v2.0\common\bold.reports.common.min
    • \v2.0\common\bold.reports.widgets.min
    • \v2.0\bold.report-viewer.min
    • \v2.0\bold.report-designer.min

The final updated app/app.js file appears like this.

    ....
    ....

    import history from 'utils/history';
    import 'sanitize.css/sanitize.css';

    //Report Designer component styles
    import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css';

    //Report Designer component dependent scripts
    import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
    import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';

    //Report Viewer and Designer component scripts
    import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
    import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';

    //Reports react base
    import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';

    ....
    ....

    const MOUNT_NODE = document.getElementById('app');

    const bounds = { height: '800px', width: '100%'};
    const render = messages => {
      ReactDOM.render(
        <div style={bounds}>
          <BoldReportDesignerComponent id="reportdesigner_container"  >
          </BoldReportDesignerComponent>
        </div>,
        MOUNT_NODE,
      );
    };

    ....
    ....