Migrate to Report Designer v2.0 component in React 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 public\index.html file.

  2. Remove the following script references from the public\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.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.js file appears like this.

  /* eslint-disable */
  import React from 'react';
  import './App.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';

  var designerStyle = {'height': '700px', 'width': '100%'};

  function App() {
    return (
      <div style={designerStyle} className="App">
              <BoldReportDesignerComponent
              id="reportdesigner_container"
              serviceUrl={'https://demos.boldreports.com/services/api/ReportDesignerWebApi'}>
              </BoldReportDesignerComponent>
      </div>
    );
  }


  export default App;