How to Add Barcode Items to a Blazor Designer Application

Bold Reports allows users to add barcode report items in the Blazor Report Designer, enabling the creation of 1D and 2D barcodes directly within reports. This feature is essential for applications involving inventory management, product tracking, and automated data entry. This article outlines the steps to integrate barcode report items into the Bold Reports Designer Blazor application.

Step-by-Step Instructions

Step 1. Install the Barcode CRI Package

To process barcode report items, you must install the Custom Report Item (CRI) package in your Blazor application.

Open your terminal and run the following command to install the Barcode CRI:
```
dotnet add package BoldReports.CRI.Barcode
```

Step 2. Add Extension Assets to Your Project

The Report Designer requires specific JavaScript and CSS files to render barcode items in the browser.

Navigate to wwwroot/scripts and create a new folder named extension.
Locate the extension files on your local machine, typically found atC:\Program Files\Bold Reports\Report Designer\Extensions
Copy the barcode-related scripts and styles into your new wwwroot/scripts/extension folder.

Step 3. Register Scripts and Styles

Include the copied assets in your application’s main entry point to ensure the designer can load them.

Open _Host.cshtml (for Blazor Server) or index.html (for Blazor WebAssembly).

Add the following references in the <head> tag:

<link href="~/scripts/extension/barcode.reportitem.css" rel="stylesheet" />
<script src="~/scripts/extension/barcode.reportitem.js"></script>
<script src="~/scripts/extension/qrbarcode.reportitem.js"></script>

Step 4. Configure the Designer via JavaScript Interop

You must define the barcode extensions within the Bold Reports designer initialization.

Open your wwwroot/scripts/boldreports-interop.js file.

Update the RenderDesigner function to include the reportItemExtensions configuration:

window.BoldReports = {
    RenderDesigner: function (elementID, reportDesignerOptions) {
        $("#" + elementID).boldReportDesigner({
            serviceUrl: reportDesignerOptions.serviceURL,
            reportItemExtensions: [
                {
                    name: 'barcode',
                    className: 'EJBarcode',
                    imageClass: 'customitem-barcode',
                    displayName: '1D Barcode',
                    category: 'Barcodes'
                },
                {
                    name: 'matrixbarcode',
                    className: 'EJQRBarcode',
                    imageClass: 'customitem-qrbarcode',
                    displayName: '2D Barcode',
                    category: 'Barcodes'
                }
            ]
        });
    }
}

Step 5. Register the Extension in Program.cs

For the server-side report processing engine to recognize the barcode items, you must register the extension in your C# code.

Open Program.cs and add the registration logic for the Barcode CRI:

Step 6. Verify and Preview

Run your Blazor application and locate the Barcodes category in the item panel. You should now see 1D Barcode and 2D Barcode available for use.

Note: You can download a complete sample application here: BlazorDesigner Barcode Sample

Was this article useful?

Dislike

Comments (0)