How to Add 1D and 2D Barcodes to the Bold Reports Angular Report Designer

The Bold Reports® Angular Report Designer can be extended with 1D and 2D barcode report items. This guide covers the Angular setup that adds the barcode items to the designer toolbox. Rendering them in report preview also requires registering the custom report item on the reporting service, which is outside the scope of these steps.

Applies to: Bold Reports Angular Report Designer applications that use @boldreports/javascript-reporting-extensions.

Before You Begin

• Use the same version for @boldreports/javascript-reporting-extensions and the Bold Reports Angular reporting packages in your application.
• The steps below add barcode items to the Angular designer toolbox only. To render them in preview, the reporting service must separately register the BoldReports.CRI.Barcode custom report item extension. See the custom report item extension user guide and verify that your reporting service supports the extension.
• The steps below copy package files into the application and add ES module exports. Keep track of these changes and reapply or review them when upgrading the extensions package.
• If your application requires Report Server authentication, provide the token through your existing secure runtime configuration; do not hard-code it in source. For instructions to generate a token in the Report Server UI, see How to Get a Token from the Report Server UI | Bold Reports. This article does not cover token retrieval.

Step-by-Step Instructions

Step 1: Create an Extensions Folder

1. In your Angular project, navigate to the src/app/ directory.
2. Create a new folder named extensions.

This folder will store the custom report item extension files.

Step 2: Install the Reporting Extensions Package

Open a terminal in the project root and run the following command to install the Bold Reports JavaScript Reporting Extensions package:

npm i @boldreports/javascript-reporting-extensions

After installation, verify that the installed extensions package version matches the Bold Reports Angular reporting package versions in your project. If needed, install the matching package version explicitly.

Step 3: Copy the Extension Files

Copy the contents of node_modules/@boldreports/javascript-reporting-extensions to the src/app/extensions folder created in Step 1.

You can copy the entire directory or only the files for the barcode report items. The following steps assume the barcode files are in src/app/extensions/report-item-extensions.

Step 4: Export the Barcode Modules

To use the extension scripts as Angular modules, add the following export statements at the end of the JavaScript files in src/app/extensions/report-item-extensions.

barcode.reportitem.js

Add this line at the end of the file:

export { EJBarcode };

qrbarcode.reportitem.js

Add this line at the end of the file:

export { EJQRBarcode };

Step 5: Configure the Extensions in app.component.ts

Import the barcode classes, register them with the global window object, and define the itemExtensions array to add the barcode items to the designer toolbox.

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

import { Component } from '@angular/core';
import { EJBarcode } from './extensions/report-item-extensions/barcode.reportitem';
import { EJQRBarcode } from './extensions/report-item-extensions/qrbarcode.reportitem';

const barcode = 'EJBarcode';
const qrBarcode = 'EJQRBarcode';
window[barcode] = EJBarcode;
window[qrBarcode] = EJQRBarcode;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public serviceUrl: string;
  public serverServiceAuthorizationToken!: string;
  public reportServerUrl: string;
  public itemExtensions: any;

  constructor() {
    // Replace with your actual server and service URLs
    this.reportServerUrl = 'http://localhost:62913/reporting/api/site/site1';
    this.serviceUrl = 'http://localhost:62913/reporting/reportservice/api/Designer';
    this.itemExtensions = [{
      name: 'barcode',
      className: 'EJBarcode',
      imageClass: 'customitem-barcode',
      displayName: '1D Barcode',
      category: 'Barcodes'
    }, {
      name: 'matrixbarcode',
      className: 'EJQRBarcode',
      imageClass: 'customitem-qrbarcode',
      displayName: '2D Barcode',
      category: 'Barcodes'
    }];
  }
}

Replace the example URLs with the endpoints for your environment. Set serverServiceAuthorizationToken through your application’s existing secure runtime configuration before rendering the designer.

Step 6: Bind the Extensions to the Designer Component

Update src/app/app.component.html to include the bold-reportdesigner component and bind [reportItemExtensions] to itemExtensions.

<bold-reportdesigner
  id="designer"
  [serviceUrl]="serviceUrl"
  [reportServerUrl]="reportServerUrl"
  [serviceAuthorizationToken]="serverServiceAuthorizationToken"
  [reportItemExtensions]="itemExtensions"
  style="position: absolute; height: 700px; width: 100%;">
</bold-reportdesigner>

Step 7: Add the Extension CSS File

Add the barcode extension CSS file to the styles array in angular.json. Keep any styles already present in the array.

"styles": [
  "./node_modules/@boldreports/javascript-reporting-extensions/barcode.reportitem.css"
]

Barcode items will not render in report preview until the reporting service has registered the BoldReports.CRI.Barcode extension. Use the linked custom report item guide to configure the server separately, and verify support with your Report Server administrator if you use the Report Server service.

Step 9: Verify the Toolbox Setup

1. Run the Angular application.
2. Open the Angular Report Designer.
3. Verify that 1D Barcode and 2D Barcode appear under the Barcodes category in the toolbox.

The linked sample contains a complete setup; server-side extension registration must be configured separately.

Related Articles

• Getting Started with Angular Report Designer
• How to configure a custom report item extension
• Configure the Signature Widget in Bold Reports Designer
• 1D and 2D Barcodes in Bold Reports React Report Designer