How to configure a custom report item extension

This section explains the steps required to register and load custom report items in the Web Report Designer JavaScript application. For demonstration purposes, one-dimensional and two-dimensional barcode configuration steps are explained. You can add any other report item by following the same procedure.

Create report designer JavaScript application

Refer Getting started and create a Report Designer JavaScript application.

Adding barcode under designer item panel

Refer barcode scripts and css in the head section of the sample html file.

Note: You can get the sample script and css for one-dimensional and two-dimensional barcode report items from the installed location: {Installed_location}\Samples\Common\Javascript\assets\scripts\extension

You can also install the BoldReports.JavaScript.Extensions NuGet package to get the one-dimensional and two-dimensional barcode report items scripts.

Configure to get the one-dimensional and two-dimensional barcode report items using the reportItemExtensions API while initializing designer control.

<div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
<script type="text/javascript">
    $(function () {
        $("#designer").boldReportDesigner({
            serviceUrl: "/api/ReportingAPI",
            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'
            }]
        });
    });
</script>

Now, one-dimensional and two-dimensional barcodes will be added under the item panel.

Install barcode custom report item extension NuGet

To render the one-dimensional and two-dimensional barcodes in designer and preview, install BoldReports.CRI.Barcode package in the application.

Right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Alternatively, select the Tools > NuGet Package Manager > Manage NuGet Packages for Solution menu command.

Refer to the NuGet Packages to learn more details about installing and configuring Report Designer NuGet packages.

Search for the BoldReports.CRI.Barcode NuGet package, and install it in your application.

BoldReports.CRI.Barcode will be installed in your application. Click OK. Now, the assembly will be added to the respective project references.

BoldReports.CRI.Barcode NuGet package is available with Bold Reports release versions 3.3 and above. Both one-dimensional and two-dimensional barcodes can be rendered with this single assembly.

Register barcode custom report item extension in application startup

To register the extension in the application, follow the below steps.

1. Open the code-behind file Global.asax.cs and add the following using statement.

       using BoldReports.Web;

2. Then register the assembly name of the required extension in Application_Start as follows.

       protected void Application_Start(object sender, EventArgs e)
       {
           System.Web.Http.GlobalConfiguration.Configuration.Routes.MapHttpRoute(
           name: "DefaultApi",
           routeTemplate: "api/{controller}/{action}/{id}",
           defaults: new { id = RouteParameter.Optional });
   
           AppDomain.CurrentDomain.SetData("SQLServerCompactEditionUnderWebHosting", true);
   
           //Use the below code to register extensions assembly into report designer
           ReportConfig.DefaultSettings = new ReportSettings().RegisterExtensions(new List<string> { "BoldReports.CRI.Barcode" });
       }

To register multiple custom report item extensions in the application, provide the assembly name’s as a list of strings. Here both one-dimensional and two-dimensional barcode rendering can be done with BoldReports.CRI.Barcode assembly, so a single assembly name is added to the list.

Build and run the application. Now, you could able to render barcodes in designer and preview. Refer Barcode report item section and design barcode reports in the Report Designer.