Search results
Suggest a FeaturePDF

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.

  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
  6. Add the following v2.0 CSS and script references.

    • \v2.0\tailwind-light\
    • \v2.0\common\bold.reports.common.min
    • \v2.0\common\bold.reports.widgets.min
    • \v2.0\
    • \v2.0\

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/';

  //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/';
  import '@boldreports/javascript-reporting-controls/Scripts/v2.0/';

  //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">

  export default App;