Report Designer Integration in React Application

• Jul 28, 2023
• 2 minutes to read

Note

The complete sample project How to use the End-User Web Report Designer in JavaScript with React Framework is available in the DevExpress Examples repository.

The server-side model stores a report and provides it to the End-User Web Report Designer integrated in the client React JavaScript application.

The project consists of the server and client parts.

Server (Back-End) Application

Refer to the following topics to create a back-end application:

• Report Designer’s Server-Side Configuration (ASP.NET MVC)
• Report Designer’s Server-Side Configuration (ASP.NET Core)

Client (Front-End) Application

Create a new folder to store application files. Launch the command prompt to perform the following steps to create and configure the client part:

1. Make sure you have the current versions of Node.js with NPM installed on your machine.

   node -v
   npm -v
   

2. Create a new React application in the react-report-designer folder:

   npx create-react-app react-report-designer
   

3. Switch to the root application folder:

   cd react-report-designer
   

4. Install DevExpress packages:

   npm install devextreme devexpress-reporting @devexpress/analytics-core
   

5. Open the App.js file in the src folder and substitute its content with the following code:

   App.js

   import React from 'react';
   import ko from 'knockout';
   import 'devexpress-reporting/dx-reportdesigner';
   import './App.css';
   
   class ReportDesigner extends React.Component {
   constructor(props) {
       super(props);
       this.reportUrl = ko.observable("TestReport");
       this.requestOptions = {
       host: "https://localhost:44389/",
       getDesignerModelAction: "ReportDesigner/GetReportDesignerModel"
       };
   }
   render() {
       return (<div ref="designer" data-bind="dxReportDesigner: $data"></div>);
   }
   componentDidMount() {
       ko.applyBindings({
       reportUrl: this.reportUrl,
       requestOptions: this.requestOptions
       }, this.refs.designer);
   }
   componentWillUnmount() {
       ko.cleanNode(this.refs.designer);
   }
   };
   
   function App() {
   return (<div style={{ width: "100%", height: "1000px" }}>
       <ReportDesigner />
   </div>);
   }
   
   export default App;
   

   The code declares the Report Designer component and returns it with the App function.

   Important

   You can modify the App.js content to specify the correct server-side port (44389 in this example) and report name (TestReport in this example).

6. Open the App.css file in the src folder and append the following style sheet references:

   App.css

   /* ... */
   @import url("../node_modules/jquery-ui/themes/base/all.css");
   @import url("../node_modules/devextreme/dist/css/dx.common.css");
   @import url("../node_modules/devextreme/dist/css/dx.light.css");
   @import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
   @import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
   @import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
   @import url("../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css");
   @import url("../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css");
   

7. Run the server (back-end) application. Check whether the server-side application port has the same number as specified in the App.js file.

8. Navigate to the client application’s root folder, open the command prompt and run the client application:

   npm start
   

   Open the browser at http://localhost:3000/ to see the Report Designer with the test report.