Report Designer Integration in React Application

• Apr 21, 2023
• 4 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 = {
   // If you use the ASP.NET Core backend:
   //  host: "https://localhost:5001/",
   //  getDesignerModelAction: "DXXRD/GetDesignerModel"
   // If you use the ASP.NET MVC backend:
       host: "http://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.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.

9. (Optional) Enable the in-place rich text editor for the XRRichText control, as described in the following help topic: Reporting for React - Enable the Rich Text Editor.

Troubleshooting

When you start the application, you may encounter the following problems:

Page is blank

The Report Designer page is blank. The following error message is displayed at the bottom of the page: The page is blank because the Report Designer failed to load the report. Consult the developer for assistance. Use development mode for detailed information. If the page does not display the Document Viewer, press F12 to invoke DevTools and inspect the console messages.

Check the following:

• The backend application is up and running.
• The specified controller action path matches the back-end application type. If you use the ASP.NET Core backend, specify the /DXXRD/GetDesignerModel path, if you use the ASP.NET MVC backend, specify the /ReportDesigner/GetReportDesignerModel path.
• The backend application runs on the port specified in the host setting of the Report Designer component.
• The application’s URI satisfies the CORS policy specified in your backend application.
• The reportName value matches an existing report. For the backend application it means that the Reports folder contains the reportName.repx file or the ReportsFactory.Reports dictionary contains the reportName entry (if backend application originated from the DevExpress template).
• The version of the DevExpress scripts (npm packages) should match the version of the server-side libraries (NuGet packages). You can enable Development Mode to check for library version mismatch on every request to the server. For more information, review the following help topic: Server-Side Libraries Version.

Review the following help topic for more information: Troubleshooting.