Chat Icon

Add the Report Viewer to a React Application

How to Add Web Report Viewer to a React application

Add the Report Viewer to a React Application

In this blog, I will walk you through the integration of Bold Report’s Report Viewer for React component into an app.

The Report Viewer is a visualization control used to display SSRS RDL and RDLC reports within web applications. It allows you to view RDL/RDLC reports with or without using SSRS. This component comes with a wide range of report items to transform your business data into meaningful information.

Prerequisites

Install Create React App

Create React App is a simple and effective way to create a single-page React application that provides a build setup with no configuration. To install the Create React App globally on your machine, run the following command in the command prompt.

npm install create-react-app -g

Note: To learn more about the Create React App package, refer to this page.

Create a new React application

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

create-react-app reportviewer

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

Create a new React application. | React Reporting Tools
Create a New React Application

Install the Create React Class package

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

cd reportviewer

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

npm install create-react-class –save--dev
Create React Class package. | React Reporting Tools
Create React Class Package

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--dev
Install the Bold Reports React package. | React Reporting Tools
Install the Bold Reports React Package

Add Scripts Reference

Bold Reports needs a window.jQuery object to render the React components. So, create a file named globals.js in the src folder and import jQuery into the globals.js file, like in the following 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;
Render React components. | React Reporting Tools
Render React Components

Reference the globals.js file in the index.js file, like in the following code snippet.

import './globals'
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
Import globals. | React Reporting Tools
Import globals

Add React Report Viewer Component

Now, let’s add the Report Viewer component. The Bold Report Viewer script and style files need to be imported in order to run the web Report Viewer. 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': '900px', 'width': '100%'};

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

export default App;
Import viewerStyle object. | React Reporting Tools
Import viewerStyle Object

The highlighted viewerStyle is an object used to store the width and height of the Report Viewer control.

Import App function. | React Reporting Tools
Import App Function

The highlighted App function will return the Report Viewer component.

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

<title>Bold Reports – Report Viewer</title>
<!-- Data-Visualization -->
<script src="https://cdn.boldreports.com/4.2.52/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<script src="https://cdn.boldreports.com/4.2.52/scripts/data-visualization/ej2-maps.min.js"></script>
Added scripts and references. | React Reporting Tools
Added Scripts and References

Let’s look at the scripts and style sheets required to render the Report Viewer.

NamePurpose
ej2-base.min.jsIncludes the Syncfusion EJ2 component base and data manipulation scripts.
ej2-data.min.js
ej2-pdf-export.min.js
ej2-svg-base.min.js
ej2-lineargauge.min.jsUsed to render the linear gauge. Add it only if the report contains the linear gauge report item.
ej2-circulargauge.min.jsUsed to render the circular gauge. Add it only if the report contains the circular gauge report item.
ej2-maps.min.jsUsed to render the map. Add it only if the report contains the map item.
bold.report-viewer.minIncludes the Report Viewer component scripts in minified format.
bold.reports.all.min.cssIncludes the CSS styles for the JavaScript reporting components.
ej.bulletgraph.min

ej.chart.min.js

Used to render the chart and bullet graph. Add it only if the report contains the chart or bullet graph report item.

Set Report Path and Web API Services

The Bold Report Viewer must have a Web API service to process and evaluate the provided SSRS RDL report.

In this blog, I am using the Web API service and the report that is already hosted in an Azure web app.

Note: You can create your own Web API service by referring to our online documentation link.

To render the report, open the App.js file and set the properties of the Report Viewer:

  • The reportPath property is used to specify the path of an RDL report.
  • The reportServiceUrl property is used to specify the Web API service URL required for processing an RDL report.

Note: The Web API service used in the following code is already hosted in the Azure web app.

/* 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': '900px', '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;
Set report path and Web API services. | React Reporting Tools
Set Report Path and Web API Services

Note: The sales-order-detail.rdl report is from the demo server location and the file is located in the resources/docs/ path.

Run the Application

To run the application, run the following command in the command prompt.

npm run start

It will launch the application in the default browser at the following URL: “http://localhost:3000/“. The npm run start command automatically opens your browser.

Preview image for Report Viewer component in a React application. | React Reporting Tools
Preview Image for Report Viewer Component in a React Application

As you can see, in the Bold Report Viewer, the sales-order-detail report is loaded.

Conclusion

In this blog, we learned how to integrate the Report Viewer component into a React application. To explore further, go through our sample reports and Bold Reports documentation.

If you have any questions, please post them in the comments section. You can also contact us through our contact page, or if you already have an account, you can log in to submit your support question.

Bold Reports now comes with a 15-day free trial with no credit card information required. We welcome you to start a free trial and experience Bold Reports. Give it a try and let us know what you think!

Stay tuned to our official TwitterFacebookLinkedInPinterest, and Instagram pages for announcements about upcoming releases.

Leave a Reply

Your email address will not be published. Required fields are marked *