Search results
PDF

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
    • 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;