Progress® Telerik® Reporting R2 2017

How To: Use Angular Report Viewer with SystemJS

SystemJS is a dynamic ECMAScript (ES) module loader that is used by Angular Quickstart and other projects.

To use Progress® Telerik® Angular Report Viewer with SystemJS, you must explicitly list the package entry points. This article demonstrates how to implement the required configuration when you use the Angular Quickstart project template.

The following article results in a new Angular application with settings similar to these of the local AngularDemo project, installed by default under [TelerikReporting_InstallDir]\Examples\Angular\SystemJS.

Prerequisites

  • Review the Angular Report Viewer System Requirements.

  • A running application that hosts a Reporting REST service at address /api/reports. For more information, see Telerik Reporting REST Services.

  • Copy of the "Product Catalog.trdp" report file from [TelerikReporting_InstallDir]\ReportDesigner\Examples in the folder used by the ReportFileResolver in the Reporting REST service implementation.

  • Entry with the default connection string used by Telerik Reporting sample reports in the web.config file of the project hosting the Reporting REST service:

    <connectionStrings>
       <add name="Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString"
                  connectionString="Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI"
                  providerName="System.Data.SqlClient" />
    </connectionStrings>

Clone Angular Quickstart

If you don't have an Angular 4 SystemJS application, clone the Angular Quickstart project into a local folder with the following command:

git clone https://github.com/angular/quickstart.git
cd quickstart
npm install

Add the Angular Report Viewer Package

Tip Tip

All path/url links in the described steps should be adapted according to your project setup.

Steps:

  1. The Angular Report Viewer requires jQuery peer dependencies. To install it use the following command:

    npm install --save jquery
  2. The Telerik Angular Report Viewer package is published in the public NPM registry. To install the package, run:

    npm install --save @progress/telerik-angular-report-viewer
  3. Configure SystemJS

    The configuration file, which SystemJS uses, is in the project template under src/systemjs.config.js.

    To add the Angular Report Viewer and jQuery configuration to the map and packages section, use the following example:

    json
    map: {
      // ...
    
      '@progress': 'npm:@progress',
      '@telerik': 'npm:@telerik',
      'jquery': 'npm:jquery/dist/jquery.js',
    },
    packages: {
      // ...
    
    
      // Telerik Angular Report Viewer package
      '@progress/telerik-angular-report-viewer': {
        main: 'dist/cjs/main',
        format: 'cjs',
        defaultExtension: 'js'
      }
    }
  4. Import the TelerikReportingModule in your application root module:

    TypeScript
    import { TelerikReportingModule } from '@progress/telerik-angular-report-viewer';
    @NgModule({
      imports: [TelerikReportingModule]
  5. Add the desired report viewer container style using a property of the AppComponent class:

    TypeScript
    export class AppComponent {
      viewerContainerStyle = {
        position: 'absolute',
        top: '5px',
        bottom: '5px',
        left: '5px',
        right: '5px',
        overflow: 'hidden',
        ['font-family']: 'ms sans serif'
      };
    }
  6. Use the report viewer selector in the AppComponent template:

    HTML
    <tr-viewer 
        [containerStyle]="viewerContainerStyle"
        [serviceUrl]="'http://myrestserviceurl/api/reports'"
        [reportSource]="{
            report: 'Product Catalog.trdp',
            parameters: {}
        }"
        [viewMode]="'INTERACTIVE'"
        [scaleMode]="'SPECIFIC'"
        [scale]="1.0">
    </tr-viewer>

    For all available report viewer options refer to Options.

  7. Style the viewer using the desired Kendo UI theme:

    • When using Less-Based Themes:

      Add references to the CSS files in the <head> element of index.html:

      HTML
      <!-- The required Less-based styles -->                  
      <link href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" rel="stylesheet" />
      <link href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.blueopal.min.css" rel="stylesheet" />
    • When using Sass-Based Themes:

      Use pre-built CSS files or NPM packages as described in Getting the Sass-Based Themes. Then set the templateUrl of the report viewer to an HTML template specifically designed for use with the Sass-Based themes:

      HTML
      <tr-viewer 
          [containerStyle]="viewerContainerStyle"
          [serviceUrl]="'http://myrestserviceurl/api/reports'"
          [templateUrl]="'node_modules/@progress/telerik-angular-report-viewer/dist/dependencies/telerikReportViewerTemplate-sass.html'"
          [reportSource]="{
              report: 'Product Catalog.trdp',
              parameters: {}
          }"
          [viewMode]="'INTERACTIVE'"
          [scaleMode]="'SPECIFIC'"
          [scale]="1.0">
      </tr-viewer>
  8. Run the application:

    npm run start