Migrate to Report Viewer v2.0 component

This section provides simple step-by-step instructions to update your existing Report Viewer application to our latest modern v2.0 scripts, styles and components.

Replacing Report Viewer component

  1. Open the App.js file.

  2. Remove the Report Viewer component old style and scripts

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

  3. Add v2.0 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.

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