This example incorporates the Web Report Designer into a client-side app built with React. The example consists of two parts:
-
The ServerSideApp folder contains the backend project. The project is an ASP.NET Core application that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements custom web report storage.
-
The react-report-designer folder contains the client application built with React.
This project contains code snippets used for client-side customization and reflected in our online help topics. Each code snippet is enclosed in a page.tsx file in a separate folder. After running the project, navigate the following locations to see the result:
| Location | Description |
|---|---|
| /client-side-api | Performs some client-side actions. |
| /save-modified-report | Saves a modified report in the currently active tab. Saves all modified reports. |
| /manage-properties-panel | Hides or disables individual editors or sections in the Properties panel for the specified control type. |
| /report-designer-api | Calls the Report Designer's RunWizard method to invoke New Report Wizard. |
| /open-report | Adds a button that loads a specified report. |
| /save-report | Adds a button that saves the current report. |
In the ServerSideApp/ServerSideApp folder, run the following command:
dotnet run
The server starts at http://localhost:5000. To debug the server, run the application in Visual Studio.
In the react-report-designer folder, run the following commands:
npm install
npm run dev
Open http://localhost:3000/ in your browser to view the result. The application displays the Web Report Designer.
- Create a React Application with Web Report Designer
- Report Designer Server-Side Configuration (ASP.NET Core)
(you will be redirected to DevExpress.com to submit your response)