Report Designer Integration in Angular

• Feb 11, 2020
• 3 minutes to read

Note

The complete sample project How to use the Web Report Designer in JavaScript with Angular is available in the DevExpress Examples repository.

You can use the End-User Web Report Designer in JavaScript with Angular based on the server-side model. You should create two projects: a server (backend) project and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Important

Perform the steps decribed in one of the following topics to create a backend application:

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

This document describes how to create and configure the client part:

1. Install Node.js and npm if they do not exist on your machine. Check whether the latest version of npm is installed.

2. Open the command prompt and install the Angular CLI (command line interface tool) globally.

   npm install -g @angular/cli
   

3. Create a new folder (JS in this example) to store all the files related to the client-side functionality.

4. Navigate to the JS folder and run the following command to create a new project:

   ng new angular-report-designer
   

   Refer to the Angular documentation for information on the application structure.

5. Open the package.json configuration file and add the following packages:

   JSON

   ...
     "dependencies": {
       ...
       "devextreme": "~19.2.15",
       "devexpress-richedit": "~19.2.15",
       "@devexpress/analytics-core": "~19.2.15",
       "devexpress-reporting-angular": "~19.2.15"
     },
   ...
   

   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 this package to reduce the node_modules folder size.

6. Change your current directory to the project root folder and install packages:

   cd angular-report-designer
   
   npm install
   

7. Replace the JS\angular-report-designer\src\app\app.module.ts file content with the following code:

   app.module.ts

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { AppComponent } from './app.component';
   
   import { DxReportDesignerModule } from 'devexpress-reporting-angular';
   
   @NgModule({
   declarations: [
       AppComponent
   ],
   imports: [
       BrowserModule,
       DxReportDesignerModule
   ],
   providers: [],
   bootstrap: [AppComponent]
   })
   export class AppModule { }
   

8. Replace the JS\angular-report-designer\src\app\app.component.html file content with the following code that uses the dx-report-designer Angular component:

   HTML

   <div>
   <dx-report-designer [reportUrl]="reportUrl" height="700px" >
       <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>
   </dx-report-designer>
   </div>
   

9. Replace the JS\angular-report-designer\src\app\app.component.ts file content with the following code:

   app.component.ts

   import { Component, ViewEncapsulation } from '@angular/core';
   import 'devexpress-reporting/dx-richedit';
   
   @Component({
   selector: 'app-root',
   encapsulation: ViewEncapsulation.None,
   templateUrl: './app.component.html',
   styleUrls: [
       "../../node_modules/jquery-ui/themes/base/all.css",
       "../../node_modules/devextreme/dist/css/dx.common.css",
       "../../node_modules/devextreme/dist/css/dx.light.css",
       "../../node_modules/devexpress-richedit/dist/dx.richedit.css",
       "../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
       "../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
       "../../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
       "../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css",
       "../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css"
   ]
   })
   
   export class AppComponent {
   title = 'DXReportDesignerSample';
   getDesignerModelAction = "/ReportDesigner/GetReportDesignerModel";
   // The report's path. The Report Designer opens it when the application starts.
   reportUrl = "Products";
   // Backend's project URI.
   hostUrl = 'http://localhost:54111/';
   }
   

   Important

   This example uses the report name and server port specified in code above in the code above. You can change these settings to the values defined in your backend application.

10. Run the backend project.

11. Switch to the client root folder (JS\angular-report-designer) and run the command to launch the server and rebuild the application:

    ng serve
    

12. Open your browser at http://localhost:4200/ to see the result.