Migrate to Report Viewer v2.0 component

To migrate an existing Bold Reports® React Report Viewer application to the v2.0 component, replace the old style and script imports in the App.js file with the v2.0 styles and scripts.

How do I replace the Report Viewer scripts and styles for v2.0?

To replace the scripts and styles for the Bold Reports® React Report Viewer v2.0, remove the old imports from the App.js file and import the v2.0 style and scripts.

  1. Open the App.js file.

  2. Remove the old Report Viewer component style and scripts.

    • bold.report-viewer.min
    • bold.reports.all.min.css
    • ej.bulletgraph.min
    • ej.chart.min

  3. Add the v2.0 style and scripts.

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

  4. The final updated App.js file looks as follows:

/* eslint-disable */
import React from 'react';
import './App.css';

import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-viewer.min.css';

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

import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';

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

function App() {
  return (
    <div style={viewerStyle}>
      <BoldReportViewerComponent
      id="reportviewer-container">
      </BoldReportViewerComponent>
    </div>
  );
}

export default App;

See also