Search results
PDF

Display SSRS RDL report in Bold Reports Angular Report Viewer

This section explains you the steps required to create your first Angular reporting application in Angular CLI to display already created SSRS RDL report in Bold Reports Angular Report Viewer without using a Report Server, refer to the following steps.

If you are using lower version of Bold Reports Angular (< v2.2.28), then refer Getting Started for earlier version.

Prerequisites

Before you begin, make sure your development environment includes the following:

  • Node JS (version 8.x or 10.x)
  • NPM (v3.x.x or higher)

Install the Angular CLI

Angular provides the easiest way to set Angular CLI projects using the Angular CLI tool. To install the CLI application globally to your machine, run the following command in the Command Prompt.

npm install -g @angular/cli@latest

To learn more about angular-cli commands, click here.

Create a new application

To create a new Angular application, run the following command in the Command Prompt.

ng new project-name

E.g : ng new reportviewerapp

The ng new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.

Accept the initial app project defaults by pressing the Enter or Return key

Configure Bold Report Viewer in Angular CLI

Reporting tools packages are distributed in NPM package as @boldreports/angular-reporting-components.

  1. To configure the Report Viewer component, change the directory to your application’s root folder.

    cd project-name
    
    E.g : cd reportviewerapp
  2. Run the following commands to install the Bold Reports Angular library.

    npm install @boldreports/angular-reporting-components --save-dev
  3. Also, Install Bold Reports typings by executing the below command.

    npm install --save-dev @boldreports/types
  4. Register the @bold-reports/types under the typeRoots and add the typings jquery and reports.all to the tsconfig.app.json file.

    {
      ...
      ...
      "compilerOptions": {
        ...
        ...
        "typeRoots": [
          "node_modules/@types",
          "node_modules/@boldreports/types"
        ],
        "types": [
          "jquery",
          "reports.all"
        ]
      },
      ...
      ...
    }
  5. Report Viewer requires window.jQuery object to render the component. Import jQuery in the src/polyfills.ts file as shown in the following code snippet.

    import * as jquery from 'jquery';
    window['jQuery'] = jquery;
    window['$'] = jquery;

Adding CSS reference

Add Report Viewer component style (bold.reports.all.min.css) as given in the angular.json file within the pojectname -> styles section (Eg. reportviewerapp -> styles).

If you are using Angular 6 or lower version project, add the changes in the angular-cli.json file.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "reportviewerapp"
  },
  "reportviewerapp": [
    {
      "root": "src",
      "outDir": "dist",
       . . .
       . . .
      "styles": [
        "styles.css",
         "./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css"
      ],
      "scripts": [],
       . . .
       . . .
      }

In the previous code, the material theme is used. You can modify the theme based on your application, refer the following syntax: ./node_modules/@boldreports/javascript-reporting-controls/Content/[theme-name]/bold.reports.all.min.css

Adding Report Viewer component

To add the Report Viewer component, refer to the following steps:

  1. Open the app.module.ts file.

  2. You can replace the following code snippet in the app.module.ts file.

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { BoldReportViewerModule } from '@boldreports/angular-reporting-components';
    import { AppComponent } from './app.component';
    
    // Report viewer
    import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
    
    // data-visualization
    import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
    import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
    imports: [
        BrowserModule,
        BoldReportViewerModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
  3. Open the index.html file and refer the following scripts in <head> tag.

    <!-- Data-Visualization -->
    <script src="https://cdn.boldreports.com/2.4.19/scripts/common/ej2-base.min.js"></script>
    <script src="https://cdn.boldreports.com/2.4.19/scripts/common/ej2-data.min.js"></script>
    <script src="https://cdn.boldreports.com/2.4.19/scripts/common/ej2-pdf-export.min.js"></script>
    <script src="https://cdn.boldreports.com/2.4.19/scripts/common/ej2-svg-base.min.js"></script>
    <script src="https://cdn.boldreports.com/2.4.19/scripts/data-visualization/ej2-lineargauge.min.js"></script>
    <script src="https://cdn.boldreports.com/2.4.19/scripts/data-visualization/ej2-circulargauge.min.js"></script>
    <script src="https://cdn.boldreports.com/2.4.19/scripts/data-visualization/ej2-maps.min.js"></script>
  4. Open the app.component.html file and initialize the Report Viewer.

  5. You can replace the following code snippet in the app.component.html file.

    <bold-reportviewer id="reportViewer_Control" style="width: 100%;height: 950px">
    </bold-reportviewer>
  6. Open the app.component.ts and replace the following code example.

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'reportviewerapp';
      public serviceUrl: string;
      public reportPath: string;
    
        constructor() {
            // Initialize the Report Viewer properties here.
        }
    }

    If you have faced the issue 'ej' is not defined after the above configuration in Angular CLI latest version 7, refer to the following code snippet at the top of your app.component.ts file in your application where you have rendered Syncfusion Components(model file) to resolve the issue.

    `/// <reference types="reports.all" />`
    
     import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      ...
      ...
    }

Create Web API service

The Report Viewer requires a Web API service to process the report files. You can skip this step and use the online Web API services to preview the already available reports or you should create any one of the following Web API services:

If you are looking to load the report directly from SQL Server Reporting Services (SSRS), then you can skip the following steps and move to SSRS Report.

Adding already created report

If you have created a new service, you can add the reports from the Bold Reports installation location. For more information, refer to samples and demos section.

  1. Create a folder Resources in your Web API application to store the RDL reports and add already created reports to it.

  2. Add already created reports to the newly created folder.

    In this tutorial, the sales-order-detail.rdl report is used, and it can be downloaded in this link.

Refer to the create RDL report section for creating new reports.

Set report path and Web API service

To set report path and Web API service, open the app.component.ts file and add the codes as shown in the constructor.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'jsreport-sample';
  public serviceUrl: string;
  public reportPath: string;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = '~/Resources/docs/sales-order-detail.rdl';
    }
}

In the above code, the reportServiceUrl used from online URL. You can host the Bold Reports service to any Azure, AWS or own domain URL and use it in Report Viewer. View the already created Web API service from the Reporting Service git hub location.

Open the app.component.html to set reportPath and reportServiceUrl properties of Report Viewer as in the following.

<bold-reportviewer id="reportViewer_Control" [reportServiceUrl] = "serviceUrl" [reportPath] = "reportPath" style="width: 100%;height: 950px">
</bold-reportviewer>

Serve the application

To serve the application, follow these steps:

  1. Navigate to the root of the application and run the application using the following command.

    ng serve
  2. Navigate to the appropriate port http://localhost:4200 in the browser.

  3. Click view option to view the demo.

app.component.ts
app.component.html
app.module.ts
import { Component } from '@angular/core';

@Component({
  selector: 'ej-sample',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public serviceUrl: string;  
  public reportPath: string;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = '~/Resources/docs/sales-order-detail.rdl';
    }
}
<bold-reportviewer id="report-viewer" [reportServiceUrl]="serviceUrl" [reportPath]="reportPath">
</bold-reportviewer>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BoldReportsModule } from '@boldreports/angular-reporting-components';
import { AppComponent } from './app.component';

//Reports
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min';

// data-visualization
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min';

// code-mirror
import 'codemirror/lib/codemirror';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/mode/sql/sql';
import 'codemirror/mode/vb/vb';

import * as CodeMirror from 'codemirror';
const codemirror = 'CodeMirror';
window[codemirror] = CodeMirror;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BoldReportsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

See Also

Render Report Server reports

Create RDLC report

Render RDLC reports

Preview report in print mode

Set data source credential for shared data sources

Change data source connection string

Production deployment

List of SSRS server versions are supported in Bold Reports