Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Create a React Front-End Application with a Report Designer (Next.js)

  • 5 minutes to read

Important

Familiarity with React basic concepts and patterns is essential prior to the use of this documentation. If you require a review, please refer to React documentation for a getting-started tutorial

The Web Report Designer is used in applications that contain client and server parts:

Client
A Web Report Designer integrated in a client React application displays a report provided by the server-side model.
Server
The server is an ASP.NET Core application that handles client data requests and provides access to data sources, report storage, and other back-end capabilities.

This tutorial creates and configures a client React application and a server ASP.NET Core backend. The client is created with the help of Next.js and contains the Web Report Designer control.

View Example

#Prerequisites

Note the following details about package versions:

  • The script version on the client should match the library version on the server.
  • DevExpress npm package versions should be identical.

#Create a Server Application (Back-End)

#Use the DevExpress CLI Template

You can use DevExpress CLI Templates to create an ASP.NET Core back-end application. Begin with the steps below:

  1. Install DevExpress ASP.NET Core project templates from nuget.org:

    dotnet new install DevExpress.AspNetCore.ProjectTemplates
    
  2. Create a back-end Reporting application:

    console
    dotnet new dx.aspnetcore.reporting.backend -n ServerApp
    

    You can use the following parameters to see available command options: -? | -h | --help.

  3. Enable cross-origin requests (CORS). Specify the policy that allows any local application to access the report’s back-end. Use the SetIsOriginAllowed method to set it up.

    Call the UseCors method and pass the policy name as a parameter. The UseCors method should be called after the UseRouting method and before any MVC-related code. Place the UseCors method before the UseMvc or UseEndpoints methods.

    Open the application startup file and insert the following code:

    var builder = WebApplication.CreateBuilder(args);
    
    builder.Services.AddCors(options => {
        options.AddPolicy("AllowCorsPolicy", builder => {
            // Allow all ports on local host.
            builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost");
            builder.AllowAnyHeader();
            builder.AllowAnyMethod();
        });
    });
    
    var app = builder.Build();
    
    app.UseRouting();
    app.UseCors("AllowCorsPolicy");
    
    app.UseEndpoints(endpoints => {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
    
    app.Run();
    
  4. To run the server-side application, run the following command:

    console
    cd ServerApp
    dotnet run
    

#Use Visual Studio Template

To create a back-end application from a Microsoft or DevExpress Template in Visual Studio, review the following help topics:

#Create a Client Application (Front-End)

  1. In the command prompt, create a React application with Next.js:

    cmd
    npx create-next-app@latest react-report-designer
    
  2. Navigate to the project folder:

    cmd
    cd react-report-designer
    
  3. Install the devexpress-reporting-react npm package:

    cmd
    npm install devexpress-reporting-react@24.2-stable
    
  4. Open the app/page.tsx file and substitute its contents with the following code excerpt:

    TypeScript
    'use client';
    import ReportDesigner, { RequestOptions} from 'devexpress-reporting-react/dx-report-designer';
    import 'devextreme/dist/css/dx.light.css';
    import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
    import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
    import 'devexpress-reporting/dist/css/dx-webdocumentviewer.css';
    import 'ace-builds/css/ace.css';  
    import 'ace-builds/css/theme/dreamweaver.css';  
    import 'ace-builds/css/theme/ambiance.css';  
    import '@devexpress/analytics-core/dist/css/dx-querybuilder.css';
    import 'devexpress-reporting/dist/css/dx-reportdesigner.css';
    
    function App() {
    
      return (
        <ReportDesigner reportUrl="TestReport">
            <RequestOptions host="http://localhost:5000/" getDesignerModelAction="DXXRD/GetDesignerModel" />
        </ReportDesigner>       
      )
    }
    
    export default App
    

    This code snippet declares the ReportDesigner component and returns it with the App function.

    Specify the correct server-side port (the host variable) and report name (the reportUrl variable).

#Run the Project

  1. Run the server application.

    Make sure to specify the correct server-side port (5000 in this example) and report name (TestReport in this example) in the app/page.tsx file.

  2. Run the client application:

    cmd
    npm run dev
    
  3. Open the http://localhost:3000/ in your browser to see the result:

    Web Report Designer Page

#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.

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 back-end application.
  • The reportUrl value matches an existing report. For the back-end application, ensure that either the Reports folder contains a reportUrl.repx file or the ReportsFactory.Reports dictionary contains the reportUrl entry (if the back-end application originated from the DevExpress template).
  • The version of DevExpress npm packages should match the version of NuGet packages. Enable Development Mode to check for library version mismatch on every request to the server. For details, review the following help document: Server-Side Libraries Version.

Refer to the following help topic for more information: Troubleshooting.

See Also