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

To migrate the Bold Reports® React Report Designer in a React Boilerplate application to the v2.0 component, remove the old script references from the app\index.html file and the old CSS and script references from the app/app.js file, then add the v2.0 references. The v2.0 component gives the Report Designer a modern look and feel.

Use these steps to migrate the Bold Reports® 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 looks like the following code:

    ....
    ....

    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,
      );
    };

    ....
    ....

See also