Embed Bold Reports® Report Server Report

You can embed classic Report Designer with Report Server to create, edit, browse and publish reports using the Report Server built-in API service.

Follow this steps to integrate Report Server with Bold Reports® Designer version less than v5.2.xx

Prerequisites

Before getting started with classic Bold Report Designer, ensure that 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 Command Prompt.

npm install -g @angular/cli@latest

To learn more about angular-cli commands, refer here

Create a new application

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

ng new project-name

E.g : ng new reportdesignerapp

The ng new command prompts you for information about features to include in the initial app project. Add the Angular Routing to your angular application by entering y in the prompt window then press Enter key. Now, choose the CSS stylesheet format using the arrow keys and then press Enter key. The Angular CLI installs the required Angular npm packages and other dependencies.

Configure Bold Report Designer in Angular CLI

Bold Reporting packages are distributed in npm as @boldreports/angular-reporting-components.

  1. To configure the classic web Report Designer component, change the directory to your applications’ root folder.

    cd project-name

E.g : cd reportdesignerapp

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

    If you are using Angular CLI version 7.x.x, you will get an error like Cannot find type definition file for 'reports.all'. To resolve this error, you need to replace the node_modules/@boldreports/types line under typeRoots array in tsconfig.app.json with the following code

    "./../node_modules/@boldreports/types"

  5. Report Designer requires window.jQuery object to render the component. Import jQuery in src/polyfills.ts file, as shown in the following code sample.

    import * as jquery from 'jquery';
let windowInstance = (window as { [key: string]: any });
windowInstance['jQuery'] = jquery;
windowInstance['$'] = jquery;

Adding CSS reference

  1. Open the angular.json file from your applications’ root directory.

  2. Refer to the classic web Report Designer component style scripts bold.reports.all.min.css and bold.reportdesigner.min.css under the styles node of projects section, as shown in the following code example.

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

    Css script reference

    {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "reportdesignerapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/reportdesignerapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
            "./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css",
           "./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.min.css"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
      . . .
      . . .
      }

    In the above code snippet 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 and ./node_modules/@boldreports/javascript-reporting-controls/Content/[theme-name]/bold.reportdesigner.min.css

If you are using Angular CLI version 10.x.x, you will get a warning like CommonJS or AMD dependencies can cause optimization bailouts. To resolve this warning, you need to register the Bold Report JavaScript files under allowedCommonJsDependencies array in angular.json file.

. . .
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [
              "@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min",
              "@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min",
              "@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min",
              "@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min"
            ],
            . . .
            . . .

Adding code mirror reference

Report Designer requires the code mirror scripts and styles to edit the SQL queries and Visual Basic code functions with syntax highlighter.

  1. Run the following command, to install the code mirror dependencies.

    npm install codemirror@5.45.0

  2. Open the angular.json file from your application’s root directory and Refer the code mirror script and styles under the scripts and styles node of projects section as in the below code example.

    Css script reference

    {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "reportdesignerapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/reportdesignerapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
            "./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css",
            "./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.min.css",
            "./node_modules/codemirror/lib/codemirror.css",
            "./node_modules/codemirror/addon/hint/show-hint.css"
            ],
            "scripts": [
              "./node_modules/codemirror/lib/codemirror.js",
              "./node_modules/codemirror/addon/hint/show-hint.js",
              "./node_modules/codemirror/addon/hint/sql-hint.js",
              "./node_modules/codemirror/mode/vb/vb.js"
            ],
            "es5BrowserSupport": true
          },
      . . .
      . . .
      }

Adding Report Designer component

To add the classic web Report Designer component, refer to the following steps:

  1. Open the src/app/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 { BoldReportDesignerModule  } from '@boldreports/angular-reporting-components';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// Report viewer
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
// Report Designer
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';

@NgModule({
  declarations: [
    AppComponent
  ],
imports: [
    BrowserModule,
    BoldReportDesignerModule
  ],
  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/13.1.26/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/data-visualization/ej2-maps.min.js"></script>

  4. Open the src/app/app.component.html file and initialize the classic web Report Designer.

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

    <bold-reportdesigner id="designer" style="position: absolute;height: 550px; width: 1250px;">
</bold-reportdesigner>

  6. Open the src/app/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 = 'reportdesignerapp';
  public serviceUrl: string;

    constructor() {
        // Initialize the Report Designer properties here.
    }
}

  7. Open the app.component.html and set the Bold Report Server built-in service URL to the serviceUrl property and assign the created token to serviceAuthorizationToken properties as shown in the following code example.

        <bold-reportdesigner
    id="reportDesigner_Control"
    style="position: absolute;height: 550px; width: 1250px;">
    </bold-reportdesigner>

    If you faced the issue 'ej' is not defined, after completing the above configuration in Angular CLI latest version 7, Please refer to the following code sample in your application where you have rendered Bold Reporting components (model file) to resolve the issue.

    `/// <reference types="reports.all" />`
  • The Report Designer requires the serviceAuthorizationToken to perform the API actions with Bold Report Server. Create a token for the user by using the server RESTful API, the following code is used to generate the token.

Report Server Configuration to design the report

  • The Report Designer requires the serviceAuthorizationToken, serviceUrl, and reportServerUrl to perform the API actions with Bold Report Server. You can provide the information from Report Server as in the following explained manner.

  • serviceUrl – Report Server Reporting Service information should be provided for this API.

  • serviceAuthorizationToken – Authorization token to communicate with reportServiceUrl.

  • reportServerUrl- Report Server Reporting Server information should be provided for this API.

Open the app.component.html and set the Bold Report Server built-in service URL to the serviceUrl and reportServerUrl properties and assign the created token to serviceAuthorizationToken property, as shown in the following code example.

   <bold-reportdesigner
    id="reportDesigner_Control"
    [serviceUrl]="serviceUrl"
    [reportServerUrl]="reportServerUrl"
    [serviceAuthorizationToken] = "serverServiceAuthorizationToken" style="position: absolute;height: 550px; width: 1250px;">
    </bold-reportdesigner>

Based on the type of Report Server, you can use one of the procedures listed as follows:

Enterprise Reporting 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 {
    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 serviceUrl property. The serviceUrl property value should be in format of https://<<Report server name>>/reporting/reportservice/api/Designer.

        import { Component } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })

    export class AppComponent {
    public serviceUrl: string;
    public serverServiceAuthorizationToken: string;
    public reportServerUrl: string;

    constructor() {
    this.serviceUrl = 'https://<your-report-server-domain>/reporting/reportservice/api/Designer';
    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>>. You can use the following complete code in your app.component.ts file.

        import { Component } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })

    export class AppComponent {
    public serviceUrl: string;
    public serverServiceAuthorizationToken: string;
    public reportServerUrl: string;

    constructor() {
    this.reportServerUrl = 'https://<your-report-server-domain>/reporting/api/site/<site-name>';
    this.serviceUrl ='https://<your-report-server-domain>/reporting/reportservice/api/Designer';
    this.serverServiceAuthorizationToken = 'bearer <server-token>';
    }
    }

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 {
    public serviceUrl: string;
    public serverServiceAuthorizationToken: string;
    public reportServerUrl: 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 serviceUrl property. The serviceUrl property value is a https://service.boldreports.com/api/Designer.

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

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })

    export class AppComponent {
    public serviceUrl: string;
    public serverServiceAuthorizationToken: string;
    public reportServerUrl: string;

    constructor() {
    this.serviceUrl ='https://service.boldreports.com/api/Designer';
    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/. You can use the following complete code in your app.component.ts file.

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

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })

    export class AppComponent {
    public serviceUrl: string;
    public serverServiceAuthorizationToken: string;
    public reportServerUrl: string;

    constructor() {
    this.reportServerUrl = 'https://<your-report-server-domain>/reporting/api/';
    this.serviceUrl ='https://service.boldreports.com/api/Designer';
    this.serverServiceAuthorizationToken = 'bearer <server-token>';
    };
    }

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

       ng serve