Chat Icon

How to Add the Report Designer to a React Application

Add Report Designer to a React Application Banner Images | React Reporting Tools

How to Add the Report Designer to a React Application

In this blog, we are going to see how to use Bold Report’s Report Designer component in a React application. It comes with a wide range of report items to transform data into meaningful information quickly and build business reports.

With our Bold Reports embeddable product, you can easily embed reporting components in your project to create, bind data to, view, and export pixel-perfect, paginated reports.

Prerequisites

Install Create React Application

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

npm install create-react-app -g

Note: Refer here to learn more about the Create React App package.

Create a new React application

Run the below command in the Command Prompt to create a new React application.

create-react-app reportdesigner

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

Install and create a new react application | React Reporting Tools
Install and create a new react application

Install Create React class package

Change the directory to your application’s root folder to configure the Report Designer component.

cd reportdesigner

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

npm install create-react-class –save--dev
Install Create React class package | React Reporting Tools
Install Create React class package

Install Bold Reports React package

Now, let’s install the Bold Reports React package. Run the below command in the Command Prompt.

npm install @boldreports/react-reporting-components –save--dev
Install Bold Reports React package | React Reporting Tools
Install Bold Reports React package

Add scripts reference

Bold Reports needs a window.jQuery object to render the React components. As shown in the below code snippet, create a globals.js file in the src folder and import jQuery into it.

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;
Add scripts reference | React Reporting Tools
Add scripts reference

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

import './globals'
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
//serviceWorker will show warning "unused".
//import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
Reference the globals.js file | React Reporting Tools
Reference the globals.js file

Add Report Designer component
The Report Designer script files need to be imported to run the Bold web designer. So, import the files listed below into the App.js file.

/* eslint-disable */
import React from 'react';
import './App.css';
//Report designer source
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min';
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.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 designerStyle = {  
'height': '900px',  
'width': '100%'
};
function App() {  
return (    
<div style={designerStyle}>
<BoldReportDesignerComponent 
id="reportdesigner_container">            
</BoldReportDesignerComponent>    
</div>  
);
} 
export default App;
Add Report Designer component | React Reporting Tools
Add Report Designer component

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

Returns the Report Designer component | React Reporting Tools
Returns the Report Designer component

The highlighted App function in the previous image will return the Report Designer component.
Open the index.html file from the public folder and reference the following scripts in the <head> tag.

<title>Bold Reports – Report Designer</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>
index.html file | React Reporting Tools
index.html file
NamePurposes
ej2-base.min.jsRenders the gauge item. Add this script only if your report contains the gauge report item.
ej2-data.min.js
ej2-pdf-export.min.js
ej2-svg-base.min.js
ej2-lineargauge.min.jsRenders the linear gauge item. Add this script only if your report contains the linear gauge report item.
ej2-circulargauge.min.jsRenders the circular gauge item. Add this script only if your report contains the circular gauge report item.
ej2-maps.min.jsRenders the map item. Add this script only if your report contains the map report item.
bold.report-designer.minRenders the Report Designer control.
bold.report-viewer.minRenders the Report Viewer control.
bold.reports.all.min.cssIncludes the UI theme for the JavaScript Reporting control.
ej.bulletgraph.min
ej.chart.min.js
Renders bullet graph and chart report items in the Report Designer Control.
bold.reportdesigner.min.cssIncludes the UI theme to render the JavaScript Report Designer widget.

Set Web API service URL

Let’s set the Web API service URL. This is where the Report Designer is processed and rendered in the browser using the Web API service.
The service URL property specifies the report Web API service URL.
To render the Report Designer, set the service URL properties of the Report Designer Web API as shown in the below snippet.

/* eslint-disable */
import React from 'react';
import './App.css';
//Report designer source
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min';
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.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 designerStyle = {
  'height': '900px',
  '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;
Set Web API service URL | React Reporting Tools
Set Web API service URL

In this blog, I used our Bold Reports demo Web API service link to render the Report Designer. You can use your own Web API service.

Run the React application

Now, let’s run the application. Open the Command Prompt and run the below command.

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.

The Report Designer is loaded in the browser, as shown as follows. You can start to create stunning professional reports in the Report Designer.

Report Designer React Application | React Reporting Tools
Report Designer React Application

The report definition file will be automatically downloaded by clicking the save icon and the Save option.

Report Designer Save Option | React Reporting Tools
Report Designer Save Option

Conclusion

In this blog, we learned how to integrate the Report Designer component into a React application in Bold Reports. 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 for new releases by following us on TwitterFacebookLinkedInPinterest, and Instagram pages for announcements.

Leave a Reply

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