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.
Open the App.js file.
Remove the Report Viewer component old style and scripts
bold.report-viewer.minbold.reports.all.min.cssej.bulletgraph.minej.chart.minAdd 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.cssThe 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;