Report Viewer SDK
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

Add Web Report Viewer Classic to a React application

This section explains the steps required to add a web Report Viewer Classic to a React application.

To get start quickly with Report Viewer Classic, you can check on this video:

Prerequisites

Before getting started with the bold report viewer classic, make sure that your development environment includes the following commands.

  • Node JS (version 8.x or 10.x)
  • NPM (v3.x.x or higher)

Install the Create React App package

Create React App is a simple way to create a single-page React application which provides a build setup with no configuration. To install the Create React App globally in your machine, run the following command in the Command Prompt.

npm install create-react-app -g

To learn more about Create React App package, refer here.

Create a new React application

To create a new React application, run the following command in the Command Prompt.

create-react-app reports

The create-react-app command adds the react, react-dom, react-scripts, and other dependencies required for your React application.

The source code for this React reporting components app is available on GitHub.

Install the Create React Class

To configure the Report Viewer component, change the directory to your application�s root folder.

 cd reports

To install the type definitions for create-react-class, run the following command in the Command Prompt.

npm install create-react-class --save

Install the Bold Reports® React package

To install the Bold Reports® React package, run the following command in the Command Prompt.

npm install @boldreports/react-reporting-components --save

Adding scripts reference

Bold Reports® needs window.jQuery object to render the React components. Hence, create a file named globals.js in the src folder and import jQuery into the globals.js file, like in the below code snippet.

import jquery from 'jquery';
import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';

window.React = React;
window.createReactClass = createReactClass;
window.ReactDOM = ReactDOM;
window.$ = window.jQuery = jquery;

Refer to the globals.js file in the index.js file, like in the below code snippet.

React (Version 17x or lesser)
React (Version 18x)
import './globals';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
import './globals';
import React from 'react';
import {{ createRoot }} from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Adding Report Viewer component

The Bold Report Viewer script and style files need to be imported in order to run the Web Report Viewer. Hence, import the following files into the App.js file.

/* eslint-disable */
import React from 'react';
import './App.css';
//Report Viewer source
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css';
//Data-Visualization
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.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;

Open the public\index.html and refer the following scripts in the <head> tag.

<!-- Data-Visualization -->
<script src="https://cdn.boldreports.com/9.1.7/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/9.1.7/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/9.1.7/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/9.1.7/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/9.1.7/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/9.1.7/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<script src="https://cdn.boldreports.com/9.1.7/scripts/data-visualization/ej2-maps.min.js"></script>

Set a Web API service URL

To set a Web API service, open the App.js file and replace the existing code with the below code snippet.

/* eslint-disable */
import React from 'react';
import './App.css';
//Report Viewer source
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css';
//Data-Visualization
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.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"
     reportServiceUrl = {'https://demos.boldreports.com/services/api/ReportViewer'}
     reportPath = {'~/Resources/docs/sales-order-detail.rdl'} >
     </BoldReportViewerComponent>
    </div>
  );
}
  
export default App;