Report Designer Integration (npm or Yarn Package Managers)

Dec 04, 2024
6 minutes to read

Note

The complete sample project How to Perform the JavaScript Report Designer Integration (with npm or Yarn package managers) is available in the DevExpress Examples repository.

You can use the End-User Web Report Designer in JavaScript based on the server-side model. You should create two projects:

server (backend) project that enables Cross-Origin Resource Sharing and retrieves a report from the storage
client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Server (Backend) Part

Use DevExpress CLI Template

You can use DevExpress CLI Templates to create an ASP.NET Core back-end application. To do this, follow the steps below:

Install DevExpress ASP.NET Core project templates from nuget.org:
- .NET CLI
```
dotnet new install DevExpress.AspNetCore.ProjectTemplates
```
Create a back-end Reporting application:
```
dotnet new dx.aspnetcore.reporting.backend -n ServerApp
```
You can use the following parameters to see available command options: -? | -h | --help.

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:

Program.cs

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();

Use Visual Studio Template

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

Client (Frontend) Part

The following steps describe how to configure and host the client part:

Create a new folder to store the client-side files (ClientSide in this example).
Create the text file package.json in the ClientSide folder with the following content:
- package.json
```
{
    "name": "report-designer-example",
    "dependencies": {
        "devextreme-dist": "24.2.*",
        "devexpress-richedit": "24.2.*",
        "@devexpress/analytics-core": "24.2.*",
        "devexpress-reporting": "24.2.*",
        "ace-builds": "^1.3.3"
    }
}
```
Note
Frontend and backend applications should use the same version of DevExpress controls.

Tip
The devexpress-richedit package enables the Rich Text Editor for the XRRichText control. You can exclude the package to reduce the node_modules folder size.
Ensure that you have npm or Yarn package managers installed. Package manager are required to download all the necessary client resources to the node_modules folder.
Open the command prompt, navigate to the client application root folder (ClientSide) and run the command:
- if you have npm:
```
npm install
```
- if you have yarn:
```
yarn install
```

Create the index.html file in the root folder. It is the View file in our model. Copy the following HTML code and insert it in this file:

index.html

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml/">
<head>
    <title></title>

    <script src="node_modules/jquery/dist/jquery.min.js"></script>

    <script src="node_modules/knockout/build/output/knockout-latest.js"></script>

    <!--Link DevExtreme resources-->
    <script src="node_modules/devextreme-dist/js/dx.all.js"></script>
    <link href="node_modules/devextreme-dist/css/dx.light.css" rel="stylesheet" />

    <!-- Optionally (for intelligent code completion in the Expression Editor and Filter Editor) -->
    <script src="node_modules/ace-builds/src/ace.js"></script>
    <script src="node_modules/ace-builds/src/ext-language_tools.js"></script>
    <script src="node_modules/ace-builds/src/snippets/text.js"></script>
    <link href="node_modules/ace-builds/css/ace.css" rel="stylesheet" />
    <link href="node_modules/ace-builds/css/theme/dreamweaver.css"  rel="stylesheet" />
    <link href="node_modules/ace-builds/css/theme/ambiance.css"  rel="stylesheet" />
    <!--  -->

    <!-- Link Rich Edit scripts and styles between DevExtreme and Reporting links -->
    <script src="node_modules/jszip/dist/jszip.min.js"></script>
    <script src="node_modules/devexpress-richedit/dist/dx.richedit.min.js"></script>
    <link href="node_modules/devexpress-richedit/dist/dx.richedit.css" rel="stylesheet" />

    <!-- Link the Reporting resources -->
    <script src="node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.js"></script>
    <script src="node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.js"></script>
    <script src="node_modules/devexpress-reporting/dist/js/dx-webdocumentviewer.js"></script>
    <script src="node_modules/devexpress-reporting/dist/js/dx-reportdesigner.js"></script>
    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css" rel="stylesheet" />
    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css" rel="stylesheet" />
    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css" rel="stylesheet" />
    <link href="node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css" rel="stylesheet" />
    <link href="node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css" rel="stylesheet" />
</head>
<!-- ... -->
</html>

Note

The requirements and resources to deploy the control on the client are described in the Report Designer Requirements and Limitations document.

Create the example.js file in the root folder to provide data to the View. The JavaScript code in this file creates the designerOptions variable and activates the Knockout bindings. Copy the following code and insert it in the example.js file:

example.js

const host = 'https://localhost:5001/',
    reportUrl = "Products",
    designerOptions = {
        reportUrl: reportUrl, // The URL of a report that the Report Designer loads when the application starts.  
        requestOptions: { // Options for processing requests from the Report Designer. 
            host: host, // URI of your backend project.
            // If you use the ASP.NET Core backend:
            // getDesignerModelAction: "/DXXRD/GetDesignerModel"
            // If you use the ASP.NET MVC backend:
            invokeAction: "/ReportDesigner/Invoke", // Action to enable CORS.
            getDesignerModelAction: "/ReportDesigner/GetReportDesignerModel"; 
        }
    }

ko.applyBindings({ designerOptions });

Modify the index.html file to specify the HTML template that uses the dxReportDesigner binding with the designerOptions parameter. Add the following code to the body section:

index.html

...
<body>
    <div style="width:100%; height: 1000px" data-bind="dxReportDesigner: designerOptions" ></div>
    <script type="text/javascript" src="example.js"></script>
</body>

Host the client-side part on the web server. Start the Internet Information Services (IIS) Manager, right-click the Sites item in the Connections section, and select Add Website. In the invoked dialog, specify the site name, path to the client-side application root folder, and the website’s IP address and port.
Run the backend project in Visual Studio.
Open the website, created in the step 8, in the browser. In this example the address is http://localhost:1000 .

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.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Server (Backend) Part

Use DevExpress CLI Template

Use Visual Studio Template

Client (Frontend) Part

Troubleshooting

Page is blank