This section provides simple step-by-step instructions to update your existing Report Designer component to our latest v2.0 component.
This section explains migration steps to migrate Bold Report Designer version lesser than
v5.2.xx
tov5.2.xx
and above.
Open the public\index.html
file.
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
Open the App.js
file.
Remove the following Report Designer component older CSS references.
bold.reports.all.min.css
bold.reportdesigner.min.css
Remove the following Report Designer component older script references.
ej.bulletgraph.min
ej.chart.min
bold.report-viewer.min
bold.report-designer.min
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;