Embed Bold Reports^® Report Server Report

To embed the Bold Reports^® Angular Report Designer with Report Server, set the serviceUrl, serviceAuthorizationToken and reportServerUrl properties. You can then create, edit, browse, and publish reports using the Report Server built-in API service.

Follow these steps to integrate Report Server with Bold Reports^® Designer version higher than v5.2.xx

In Angular version 20.x and above, certain filenames have been updated. For example, the file previously named app.component.ts is now renamed to app.ts.

Prerequisites

Before getting started with the Bold Reports^® Angular Report Designer, ensure that your development environment includes the following:

• Node JS (version 20.x or 22.x and above) Version Compatibility.
• NPM (v10.x.x or higher)

Install the Angular CLI

To install the Angular CLI globally on your machine for the Report Designer application, run the following command in Command Prompt. The Angular CLI provides the easiest way to set up Angular projects.

npm install -g @angular/cli@latest

To learn more about angular-cli commands, see the Angular CLI repository on GitHub.

Create a new application

To create a new Angular application for the Report Designer, 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 application 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 Reports^® Report Designer in Angular CLI

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

1. To configure the web Report Designer component, change the directory to your application’s 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. Install the typings dependencies jquery, types/jquery and boldreports/types.

   npm install --save-dev jquery
   npm install --save-dev @types/jquery
   npm install --save-dev @boldreports/types

4. Refer the jQuery script file (jquery.js) as given in the angular.json file within the projectname > scripts section (For example, reportdesignerapp > scripts).

   {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "projects": {
       "reportdesignerapp": {
         "root": "src",
         "outDir": "dist",
         . . .
         . . .
         "styles": [
           "src/styles.css"
         ],
         "scripts": [
           "./node_modules/jquery/dist/jquery.js"
         ],
         . . .
         . . .
       }
     }
   }

5. Add the typings jquery, and reports.all to the tsconfig.app.json file.

   {
     ...
     ...
     "compilerOptions": {
       ...
       ...
       "types": [
         "jquery",
         "reports.all"
       ]
     },
     ...
     ...
   }

6. Register the @bold-reports/types under the typeRoots node in the tsconfig.json file.

   

Adding CSS reference

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

2. Refer the web Report Designer component style scripts bold.report-designer.min.css under the styles node of projects section as in the following code example:

   {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "projects": {
       "reportdesignerapp": {
         "root": "src",
         "outDir": "dist",
         . . .
         . . .
         "styles": [
           "src/styles.css",
           "./node_modules/@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css"
         ],
         "scripts": [],
         . . .
         . . .
       }
     }
   }

   In the preceding code snippet, 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/v2.0/[theme-name]/bold.report-designer.min.css.

Adding code mirror reference

The Bold Reports^® Angular Report Designer requires the code mirror scripts and styles to edit the SQL queries and Visual Basic code functions with a 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 scripts and styles under the scripts and styles nodes of the projects section as in the following code example:

   {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "projects": {
       "reportdesignerapp": {
         "root": "src",
         "outDir": "dist",
         . . .
         . . .
         "styles": [
           "src/styles.css",
           "./node_modules/@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.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/sql/sql.js",
           "./node_modules/codemirror/mode/vb/vb.js",
           "./node_modules/jquery/dist/jquery.js"
         ],
         . . .
         . . .
       }
     }
   }

Adding Report Designer component

To add the Bold Reports^® Angular Report Designer component, use the following steps:

1. Open the app.ts or app.component.ts file.

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

   import { Component } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { BoldReportDesignerModule  } from '@boldreports/angular-reporting-components';
   
   //Report Designer component dependent scripts
   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 and Designer component scripts
   import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
   import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
   
   @Component({
     selector: 'app-root',
     imports: [CommonModule, BoldReportDesignerModule],
     templateUrl: './app.html', // or app.component.html
     styleUrls: ['./app.css'] // or app.component.css
   })
   export class AppComponent {
     public serviceUrl: string;
   
     constructor() {
       // Initialize the Report designer properties here.
     }
   }

3. Open the app.html or app.component.html file and initialize the web Report Designer.

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

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

How do I configure Report Server for the Report Designer?

To configure Bold Reports^® Report Server for the Angular Report Designer, set the serviceUrl, serviceAuthorizationToken and reportServerUrl values from your Report Server.

The Report Designer requires the serviceAuthorizationToken, serviceUrl, and reportServerUrl to perform the API actions with Bold Reports^® Report Server. You can provide the information from Report Server as follows:

• 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.html or app.component.html and set the Bold Reports^® 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:

• Report from Enterprise Reporting Server
• Report from Cloud Reporting Server

Enterprise Reporting Server

• Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, refer to Generate an authentication token by using credentials.

      import { Component } from '@angular/core';
      import { CommonModule } from '@angular/common';
      import { BoldReportDesignerModule  } from '@boldreports/angular-reporting-components';
  
      //Report Designer component dependent scripts
      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 and Designer component scripts
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
  
      @Component({
      selector: 'app-root',
      imports: [CommonModule, BoldReportDesignerModule],
      templateUrl: './app.html', // or app.component.html
      styleUrls: ['./app.css'] // or app.component.css
      })
  
      export class AppComponent {
      public serverServiceAuthorizationToken: string;
  
      constructor() {
      this.serverServiceAuthorizationToken = 'bearer <server-token>';
      }
  
      }

  To generate the token within an application, refer to Generate an authentication token by using the embed secret key API.

• Set the Bold Reports^® 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';
      import { CommonModule } from '@angular/common';
      import { BoldReportDesignerModule  } from '@boldreports/angular-reporting-components';
  
      //Report Designer component dependent scripts
      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 and Designer component scripts
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
  
      @Component({
      selector: 'app-root',
      imports: [CommonModule, BoldReportDesignerModule],
      templateUrl: './app.html', // or app.component.html
      styleUrls: ['./app.css'] // or 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 Reports^® 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.ts or app.component.ts file.

      import { Component } from '@angular/core';
      import { CommonModule } from '@angular/common';
      import { BoldReportDesignerModule  } from '@boldreports/angular-reporting-components';
  
      //Report Designer component dependent scripts
      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 and Designer component scripts
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
  
      @Component({
      selector: 'app-root',
      imports: [CommonModule, BoldReportDesignerModule],
      templateUrl: './app.html', // or app.component.html
      styleUrls: ['./app.css'] // or 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. To generate the token by using credentials, refer to Generate an authentication token by using credentials.

      import { Component } from '@angular/core';
      import { CommonModule } from '@angular/common';
      import { BoldReportDesignerModule  } from '@boldreports/angular-reporting-components';
  
      //Report Designer component dependent scripts
      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 and Designer component scripts
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
  
      @Component({
      selector: 'app-root',
      imports: [CommonModule, BoldReportDesignerModule],
      templateUrl: './app.html', // or app.component.html
      styleUrls: ['./app.css'] // or app.component.css
      })
  
      export class AppComponent {
      public serviceUrl: string;
      public serverServiceAuthorizationToken: string;
      public reportServerUrl: string;
  
      constructor() {
      this.serverServiceAuthorizationToken = 'bearer <server-token>';
      };
      }

  To generate the token within an application, refer to Generate an authentication token by using the embed secret key API.

• Set the Bold Reports^® 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';
      import { CommonModule } from '@angular/common';
      import { BoldReportDesignerModule  } from '@boldreports/angular-reporting-components';
  
      //Report Designer component dependent scripts
      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 and Designer component scripts
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
  
      @Component({
      selector: 'app-root',
      imports: [CommonModule, BoldReportDesignerModule],
      templateUrl: './app.html', // or app.component.html
      styleUrls: ['./app.css'] // or 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 Reports^® 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.ts or app.component.ts file.

      import { Component } from '@angular/core';
      import { CommonModule } from '@angular/common';
      import { BoldReportDesignerModule  } from '@boldreports/angular-reporting-components';
  
      //Report Designer component dependent scripts
      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 and Designer component scripts
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
      import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
  
      @Component({
      selector: 'app-root',
      imports: [CommonModule, BoldReportDesignerModule],
      templateUrl: './app.html', // or app.component.html
      styleUrls: ['./app.css'] // or 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>';
      };
      }

Serve the application

To serve the Angular Report Designer application, run the ng serve command from the workspace folder.

1. Go to the workspace folder (reportdesignerapp).

2. Launch the server by using the CLI command ng serve, with the —open option.

   ng serve --open

3. The ng serve command launches the server and the --open option automatically opens your browser to http://localhost:4200/.