ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Concepts / ActiveReports Web Designer / Integration to Angular Application
In This Topic
    Integration to Angular Application
    In This Topic

    This page explains how you can embed the ActiveReports Web Designer component in your Angular application. To run the Angular Application Server, you will require the node.js JavaScript runtime and Angular CLI. Use the following command in the terminal or command prompt to install the Angular CLI:

    npm install -g @angular/cli

    1. Open Microsoft Visual Studio 2019 and create a new ASP .NET Core Web Application project.

      Create a New Project Dialog

    2. Type a name for your project and click Create.

      Configure your New Project Dialog

    3. Select ASP.NET Core 5.0 and choose the Angular project template from the dialog.

      Create a New Project Dialog

    4. Create a new ASP .NET Core Web Application project using the Angular template.

    5. Right-click the project in the Solution Explorer and select Manage Nuget Packages.

    6. Add the following packages to the project.

      GrapeCity.ActiveReports.Aspnetcore.Designer
      GrapeCity.ActiveReports.Aspnetcore.Viewer

    7. Create 'resources' folder in your sample project root; you can put your existing reports, themes, and images in this folder.

    8. Make sure to set the Build Action property of the resources to 'Embedded Resource'.

    9. Open 'Startup.cs' file and add the following 'using' statements at the top.
      using GrapeCity.ActiveReports.Aspnetcore.Designer;
      using GrapeCity.ActiveReports.Aspnetcore.Viewer;
      using System.IO;

    10. Open 'Startup.cs' file and add the following global variable in it:

      Startup.cs
      Copy Code
         //resources(reports, themes, images) location
         private static readonly DirectoryInfo ResourcesRootDirectory = new DirectoryInfo(".\\resources\\");
      
    11. Then, add the following code snippet in the ConfigureServices method of the 'Startup.cs' file:

      Startup.cs
      Copy Code
         services
           .AddReporting()
           .AddDesigner()
           .AddMvc(options => options.EnableEndpointRouting = false)
           .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);
      
    12. Similarly, add the following code snippet in the Configure method before UseStaticFiles() middleware, of the 'Startup.cs' file:

      Startup.cs
      Copy Code
         app.UseReporting(config => config.UseFileStore(ResourcesRootDirectory));
         app.UseDesigner(config => config.UseFileStore(ResourcesRootDirectory, false));
      
    13. Expand the ClientApp folder.

    14. Open 'package.json' file and add the following packages for ActiveReports' Viewer and Designer under 'dependencies':

      "@grapecity/ar-designer": "latest",
      "@grapecity/ar-viewer": "latest",

    15. Then, add the following package under the "devDependencies" in 'package.json' file:

      "ncp": "^2.0.0",

    16. Replace the 'scripts' section in 'package.json' file with the following content:

      package.json
      Copy Code
         "scripts": {
          "deploy-bundles": "ncp ./node_modules/@grapecity/ar-viewer/dist ../wwwroot/assets && ncp ./node_modules/@grapecity/ar-designer/dist ../wwwroot/assets",
          "ng": "ng",
          "start": "echo Starting... && ng serve",
          "build": "npm run deploy-bundles && ng build",
          "build:ssr": "ng run WebDesigner_Angular:server:dev",
          "test": "ng test",
          "lint": "ng lint",
          "e2e": "ng e2e"
        },
      

      In the above code, note that you need to replace the application name with your application name.

    17. Open ClientApp folder in the command prompt or terminal window and run the following command to install the npm packages.

      npm install

    18. Expand the app folder inside the ClientApp\src folder.
    19. Open 'app.component.ts' file and replace the existing code with the following code to initialize the Designer instance.

      app.component.ts
      Copy Code
      import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
      import { ActivatedRoute } from '@angular/router';
      declare var GrapeCity: any;
      declare var $: any;
      var viewer = null;
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
      })
      export class AppComponent {
        title = 'app';
        reportName: any;
        @ViewChild('viewer', { static: false }) private viewerElement: ElementRef;
        constructor(private route: ActivatedRoute) {
          this.route.params.subscribe(params => {
            const id = params['id'];
            const designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions();
            designerOptions.reportInfo = id ? { id: id, name: id } : null;
            designerOptions.reportItemsFeatures.table.autoFillFooter = true;
            designerOptions.openButton.visible = true;
            designerOptions.saveButton.visible = true;
            designerOptions.saveAsButton.visible = true;
            designerOptions.documentation.home = 'https://www.grapecity.com/activereports/docs/v15/online-webdesigner/overview.html';
            designerOptions.openViewer = this.openViewer.bind(this);
            designerOptions.dataTab.dataSets.canModify = true;
            designerOptions.dataTab.dataSources.canModify = true;
            GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
          });
        }
        ngOnInit() { }
        public openViewer(options) {
          if (viewer) {
            viewer.openReport(options.reportInfo.id);
            return;
          }
          viewer = GrapeCity.ActiveReports.JSViewer.create({
            locale: options.locale,
            element: '#' + options.element,
            reportService: {
              url: 'api/reporting',
            },
            reportID: options.reportInfo.id,
            settings: {
              zoomType: 'FitPage'
            },
          });
        }
        public closeViewer() {
          this.viewerElement.nativeElement.firstElementChild.remove();
        }
      }
      
    20. Open the 'app.component.html' file and replace the existing content with the following markup for hosting the element.

      app.component.html
      Copy Code
        <body>
          <div id="designer-id" style="width: 100%; height: 100%;"></div>
        </body>
      
    21. Select 'index.html' inside the ClientApp\src folder and modify its content as follows:

      index.html
      Copy Code
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>WebDesigner_Angular</title>
        <base href="/" />
        <link rel="stylesheet" href="assets/vendor/css/bootstrap.min.css" />
        <link rel="stylesheet" href="assets/vendor/css/fonts-googleapis.css" type="text/css" />
        <link rel="stylesheet" href="assets/jsViewer.min.css" />
        <link rel="stylesheet" href="assets/web-designer.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" type="image/x-icon" href="favicon.ico" />
      </head>
      <body>
        <script src="assets/vendor/js/jquery.min.js"></script>
        <script src="assets/baseServerApi.js"></script>
        <script src="assets/jsViewer.min.js"></script>
        <script src="assets/web-designer.js"></script>
        <app-root>Loading...</app-root>
      </body>
      </html>
      
    22. Open '.csproj' file of your project and add the following section in it:

      .csproj
      Copy Code
        <Target Name="ClientBuild" BeforeTargets="BeforeBuild">
             <Exec WorkingDirectory="ClientApp" Command="npm install" />
             <Exec WorkingDirectory="ClientApp" Command="npm run deploy-bundles" />
        </Target>
      
    23. Add a new item 'Web Configuration File' in the application's root and replace the content with the following code:

      web.config
      Copy Code
      <configuration>
        <system.webServer>
          <security>
            <requestFiltering allowDoubleEscaping="true"/>
          </security>
        </system.webServer>
      </configuration>
      
    24. Press Ctrl + Shift + B to build your application and then press F5 to run it.