Report Designer Integration in Angular2

• Jul 20, 2018
• 4 minutes to read

Tip

Online Example: How to use the Web Report Designer in JavaScript with Angular2

You can use the End-User Web Report Designer in JavaScript with Angular by creating two projects: a server (backend) project in ASP.NET MVC implementation and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Note

Perform steps in the Creating a Server Side for the Report Designer topic to create a backend application.

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.

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

   npm install -g \@angular/cli

3. Create a new folder to store all the files related to the client-side functionality.

4. Navigate to the added folder and run the following command in the console to create a new project:

   ng new angular-example

   Refer to the Angular documentation for information on the application’s structure and created files’ purposes.

5. In the console, use the following commands to change your current directory to the created project’s folder and add the webpack.config.js file:

   cd angular-example ng eject

6. Open the package.json configuration file and list the following third-party packages the Report Designer requires:

   JSON

   ...
     "dependencies": {
       ...
       "devexpress-reporting": "~17.2.5",
       "devextreme": "~17.2.5",
       "globalize":"~1.3.0",
       "cldrjs":"~0.5.0",
       "knockout":"~3.4.2",
       "jquery":"~3.1.1",
       "jquery-ui":"~1.12.1"
     },
   ...
   

   Refer to Report Designer Requirements and Limitations for a complete list of the necessary client resources for deploying the control.

7. Switch back to the console and run the command below to install packages:

   npm install

   After installation is completed, you can find all the libraries in the node_modules folder.

8. Open the webpack.config.js file and add the following code to the module.exports object to create aliases for certain modules:

   JS

   module.exports = {
     "resolve": {
       ...
       "alias": {
         globalize$: path.resolve(__dirname, "node_modules/globalize/dist/globalize.js"),
         globalize: path.resolve(__dirname, "node_modules/globalize/dist/globalize"),
         cldr$: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr.js"),
         cldr: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr"),
         ...
       },
    },
   

   Use the code below instead if the alias option is specified in the created project using the rxPaths function. Declare a variable with required paths prior to the module.exports object and then assign this variable to the alias option.

   JS

   const alias = rxPaths();
   alias["globalize$"] = path.resolve(__dirname, "node_modules/globalize/dist/globalize.js");
   alias["globalize"] = path.resolve(__dirname, "node_modules/globalize/dist/globalize");
   alias["cldr$"] = path.resolve(__dirname, "node_modules/cldrjs/dist/cldr.js");
   alias["cldr"] = path.resolve(__dirname, "node_modules/cldrjs/dist/cldr");
   
   module.exports = {
     "resolve": {
          ...
          "alias": alias
       },
     "resolveLoader": {
          ...
          "alias": alias
       },
   };
   

9. In the console window, generate a new report-designer Angular component.

   ng generate component report-designer

10. Open the report-designer.component.html file and specify the HTML template using the dxReportDesigner binding.

    HTML

    <div #scripts></div>
    <div #control style="width:100%; height: 1000px">
      <div data-bind="dxReportDesigner: $data"></div>
    </div>
    

11. In the report-designer.component.ts file, import the required decorators and modules and write the component for the Web Report Designer as demonstrated below. Create the required parameters and activate the Knockout bindings.

    TypeScript

    import { Component, ViewChild, AfterViewInit, ElementRef, Renderer2, Input } from '@angular/core';
    import * as ko from "knockout";
    import { Html } from "devexpress-reporting/dx-report-designer";
    
    @Component({
      selector: 'report-designer',
      templateUrl: './report-designer.component.html'
    })
    
    export class ReportDesignerComponent implements AfterViewInit {
      koReportUrl = ko.observable(null);
      _reportUrl;
      constructor(private renderer: Renderer2) { }
    
      @ViewChild('scripts')
      scripts: ElementRef;
    
      @ViewChild("control")
      control: ElementRef
    
      ngAfterViewInit() {
        const reportUrl = this.koReportUrl,
          host = 'http://localhost:54111/',
          container = this.renderer.createElement("div");
        container.innerHTML = Html;
        this.renderer.appendChild(this.scripts.nativeElement, container);
        ko.applyBindings({
          reportUrl, // The URL of a report that is opened in the Report Designer when the application starts.
          requestOptions: { // Options for processing requests from the Report Designer. 
            host, // URI of your backend project.  
            getDesignerModelAction: "/ReportDesigner/GetReportDesignerModel" // Action that returns the Report Designer model.
          }
        }, this.control.nativeElement);
      }
    
      @Input()
      set reportUrl(reportUrl: string) {
        this._reportUrl = reportUrl;
        this.koReportUrl(reportUrl);
      }
      get reportUrl() {
        return this._reportUrl;
      }
    }
    

12. Open the app.component.html file and specify the root component’s HTML template.

    HTML

    <div style="width:100%; height:100%">
       <report-designer [reportUrl]="reportUrl"></report-designer>
    </div>
    

13. In the app.component.ts file, modify the root component as follows:

    TypeScript

    export class AppComponent {
      title = 'app';
      reportUrl = "Products";
    }
    

14. Link global styles for your application in the style.css file.

    CSS

    @import url("../node_modules/jquery-ui/themes/base/all.css");
    @import url("../node_modules/devextreme/dist/css/dx.common.css");
    @import url("../node_modules/devextreme/dist/css/dx.light.css");
    @import url("../node_modules/devexpress-reporting/css/report-designer-light.min.css");
    

15. For the example to work correctly, you should first run a backend project in Visual Studio, and then, run the client part.

    Use the command below to launch the server and rebuild the application each time you make changes to the source files.

    npm start

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