Search results

Embed Bold Reports Report Server Report

This section explains how to embed the Bold Report Server reports in your Angular application. The Bold Report Server contains built-in web API service that allows you to display the reports in your application without creating a new web API. You need a Report Viewer Angular application to do the following steps:

Prerequisites

Before you begin, ensure that 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.

To configure the Report Viewer component, change the directory to your applications’ root folder.
```
cd project-name

E.g : cd reportviewerapp
```

Run the following commands to install the Bold Reports Angular library.

Angular version	NPM package installation
12 or greater than 12	npm install @boldreports/angular-reporting-components@latest —save-dev
lesser than 12	npm install @boldreports/angular-reporting-components@5.1.27 —save-dev

Note: It is important to exercise caution during the package installation process to avoid potential complications with package compilation.

Also, Install Bold Reports typings by executing the following command.
```
npm install --save-dev @boldreports/types
```

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"
    ]
  },
  ...
  ...
  }

The Report Viewer requires a window.jQuery object to render the component.
- For Angular version 12 or higher, create a file src/globals.ts and import the jQuery as shown in the below code snippet.
```
import * as jquery from 'jquery';
let windowInstance = (window as { [key: string]: any });
windowInstance['jQuery'] = jquery;
windowInstance['$'] = jquery;
```
  - In the src/app/app.module.ts file, import the src/globals.ts file prior to importing the Bold Reports viewer or designer component in the app.module.ts.
```
import './../globals';
```
- For Angular version lesser than 12, import jQuery into the src/polyfills.ts file as shown in the following code snippet.
```
import * as jquery from 'jquery';
let windowInstance = (window as { [key: string]: any });
windowInstance['jQuery'] = jquery;
windowInstance['$'] = jquery;
```

Adding CSS reference

Add Report Viewer component style (bold.report-viewer.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/v2.0/tailwind-light/bold.report-viewer.min.css"
      ],
      "scripts": [],
       . . .
       . . .
      }

In the previous code, the tailwind-light 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.report-viewer.min.css

Adding Report Viewer component

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

Open the app.module.ts file.

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';
// data-visualization
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
// Report viewer
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';

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

Open the app.component.html file and initialize the Report Viewer.

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>

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 the Angular CLI latest version 7, refer to the following code snippet in your application where you have rendered Syncfusion Components (model file) to resolve the issue.

`/// <reference types="reports.all" />`

Report Server Configuration to render the report

Report Viewer requires the serviceAuthorizationToken, reportPath and reportServiceUrl to embed the reports. You can provide the information from report server as like explained below,

reportServiceUrl – Report Server Reporting Service information should be provided for this API.
reportServerUrl- Report Server Reporting Server information should be provided for this API.
serviceAuthorizationToken – Authorization token to communicate with reportServiceUrl.
reportPath - Path of report need to formed with information for category and report name as like /{category name}/{report name}

If you need to know the difference between reportServiceUrl and reportServerUrl, refer to the Difference between Report Service URL and Report Server URL.

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

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

You can follow one of the procedure from below based on your Report Server type,

Enterprise Reporting Report Server

Generate token with your user credentials and assign it to serviceAuthorizationToken. You can refer to the documentation here, to generate the token by using credentials.

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

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

    constructor() {
    this.serverServiceAuthorizationToken='bearer <server token>';
    }

}

You can refer to the documentation here on how to generate the token within an application.

Set the Bold Report Server built-in service URL to the reportServiceUrl property. The reportServiceUrl property value should be in format of https://<<Report server name>>/reporting/reportservice/api/Viewer.

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

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

      constructor() {
      this.serviceUrl ='https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer';
      this.serverServiceAuthorizationToken='bearer <server token>';
      }

  }

Set the Bold Report Server built-in server URL to the reportServerUrl property. The reportServerUrl property value should be in format of https://<<Report server name>>/reporting/api/site/<<site name>>.

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

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

      constructor() {
      this.reportServerUrl = 'https://on-premise-demo.boldreports.com/reporting/api/site/site1';
      this.serviceUrl ='https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer';
      this.serverServiceAuthorizationToken='bearer <server token>';
      }

  }

Set the path of report in reportPath property.

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

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

    constructor() {
    this.reportServerUrl = 'https://on-premise-demo.boldreports.com/reporting/api/site/site1';
    this.serviceUrl ='https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer';
    this.serverServiceAuthorizationToken='bearer <server token>';
    this.reportPath = '/Sample Reports/Product Line Sales';
    }

}

Cloud Reporting server

Generate token with your user credentials and assign it to serviceAuthorizationToken. You can refer the documentation here, to generate the token by using credentials.

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

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

    constructor() {
    this.serverServiceAuthorizationToken='bearer <server token>';
    }

}

You can refer to the documentation here on how to generate the token within an application.

Set the Bold Report Server built-in service URL to the reportServiceUrl property. The reportServiceUrl property value is a https://service.boldreports.com/api/Viewer.

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

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

    constructor() {
    this.reportServerUrl = 'https://acmecorp.boldreports.com/reporting/api';
    this.serviceUrl ='https://service.boldreports.com/api/Viewer';
    this.serverServiceAuthorizationToken='bearer <server token>';
    }
}

Set the Bold Report Server built-in server URL to the reportServerUrl property. The reportServerUrl property value should be in format of https://<<Report server name>>/reporting/api/.

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

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

    constructor() {
    this.reportServerUrl = 'https://acmecorp.boldreports.com/reporting/api';
    this.serviceUrl ='https://service.boldreports.com/api/Viewer';
    this.serverServiceAuthorizationToken='bearer <server token>';
    }
}

Set the path of report in reportPath property.

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

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

    constructor() {
    this.reportServerUrl = 'https://acmecorp.boldreports.com/reporting/api';
    this.serviceUrl ='https://service.boldreports.com/api/Viewer';
    this.serverServiceAuthorizationToken='bearer <server token>';
    this.reportPath = '/Sample Reports/Product Line Sales';
    }
}

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

       ng serve

Contents

Prerequisites
Install the Angular CLI
Create a new application
Configure Bold Report Viewer in Angular CLI
Adding CSS reference
Adding Report Viewer component
Report Server Configuration to render the report
Enterprise Reporting Report Server
Cloud Reporting server

Having trouble getting help?Contact Support

Contents

Prerequisites
Install the Angular CLI
Create a new application
Configure Bold Report Viewer in Angular CLI
Adding CSS reference
Adding Report Viewer component
Report Server Configuration to render the report
Enterprise Reporting Report Server
Cloud Reporting server

Having trouble getting help?Contact Support

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!