Use SASS stylesheet in Angular with Bold Reports® Angular Report Designer Component

To use a SASS stylesheet with the Bold Reports® Angular Report Designer, create an Angular CLI application with the SASS style format, install the @boldreports/angular-reporting-components package and add the Report Designer component. You can then display an existing SSRS RDL report without a Report Server.

What do I need before using SASS with the Report Designer in an Angular app?

To use a SASS stylesheet with the Bold Reports® Angular Report Designer, your development environment needs Node JS and NPM at the versions listed below.

Before getting started with the Bold Reports® Angular Report Designer, 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

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, 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 SASS 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. Also, install Bold Reports® typings by running 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"
    ]
  },
  ...
  ...
}

  5. The Report Designer requires a window.jQuery object to render the component. Import jQuery in the src/polyfills.ts file as in the following code snippet:

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

Adding Bold Reports® styles reference

To add the Bold Reports® styles reference for the Angular Report Designer, reference the style sheet in the angular.json file.

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

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

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

    {
  "$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.sass",
           "./node_modules/@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css",
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
      . . .
      . . .
      }

    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 reference 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",
  "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.sass",
             "./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/vb/vb.js"
            ],
            "es5BrowserSupport": true
          },
      . . .
      . . .
      }

Adding Report Designer component

To add the Bold Reports® Angular Report Designer component, use 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 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';

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

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

  4. 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>

  5. Open src/app/app.component.ts and replace its content with the following code example:

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

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

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

    If you get the error 'ej' is not defined after this configuration in Angular CLI version 7, add the following code snippet to the file where you render the Bold Reports® components (model file).

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

Create Web API service

The Bold Reports® Angular Report Designer requires a Web API service to process the data and file actions. You can skip this step and use the online Web API service at https://demos.boldreports.com/services/api/ReportingAPI to create, edit, and browse reports. Otherwise, create one of the following Web API services.

Set Web API service URL

To set the Web API service URL for the Report Designer, open the app.component.ts file and add the following code snippet in the constructor.

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

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

    constructor() {
        this.serviceUrl = "https://demos.boldreports.com/services/api/ReportingAPI";
    }
}

Open the app.component.html to set the ServiceUrl property of the Report Designer as in the following code snippet:

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

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/. report designer output

See Also

Production deployment