How to configure custom report item extension

To add a custom report item to the Bold Reports^® ASP.NET Core Report Designer, add its scripts to the item panel, install its extension NuGet package, and register the extension assembly in the Startup method. The following steps use one-dimensional and two-dimensional barcodes as an example, and you can add any other report item by following the same procedure.

Create Report Designer ASP.NET Core application

To create a Report Designer ASP.NET Core application, follow Add Report Designer to an ASP.NET Core application.

Adding barcodes under designer item panel

Copy the sample script and CSS for the one-dimensional and two-dimensional barcode report items from installed location, {Installed_location}\Samples\Common\Javascript\assets\scripts\extension and place them inside the wwwroot folder of the Report Designer application.

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

Refer the barcode scripts and CSS in the head section of the \Views\Shared\_Layout.cshtml page.

In HomeController.cs add the one-dimensional and two-dimensional barcode report items information as in the following code sample.

 public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.ReportItemExtensions = new List<BoldReports.Models.ReportDesigner.ReportItemExtensionsModule>();
            var ReportItemExtension = new BoldReports.Models.ReportDesigner.ReportItemExtensionsModule();
            ReportItemExtension.Name = "barcode";
            ReportItemExtension.ClassName = "EJBarcode";
            ReportItemExtension.ImageClass = "customitem-barcode";
            ReportItemExtension.DisplayName = "1D Barcode";
            ReportItemExtension.Category = "Barcodes";
            ViewBag.ReportItemExtensions.Add(ReportItemExtension);
            ReportItemExtension = new BoldReports.Models.ReportDesigner.ReportItemExtensionsModule();
            ReportItemExtension.Name = "matrixbarcode";
            ReportItemExtension.ClassName = "EJQRBarcode";
            ReportItemExtension.ImageClass = "customitem-qrbarcode";
            ReportItemExtension.DisplayName = "2D Barcode";
            ReportItemExtension.Category = "Barcodes";
            ViewBag.ReportItemExtensions.Add(ReportItemExtension);
            return View();
        }
    }

Set report-data-extensions property in the Index.cshtml file with ViewBag as in the following code example:

<div style="height: 500px;width: 100%;">
    <bold-report-designer id="designer" service-url="/api/ReportingAPI" report-item-extensions="@ViewBag.ReportItemExtensions"></bold-report-designer>
</div>
</script>

The one-dimensional and two-dimensional barcodes now appear under the item panel of the Report Designer.

How do I install the barcode custom report item extension in the ASP.NET Core Report Designer?

To install the barcode custom report item extension in the Bold Reports^® ASP.NET Core Report Designer, add the BoldReports.CRI.Barcode NuGet package to the application.

To render the one-dimensional and two-dimensional barcodes in the Report Designer and preview, install the 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 BoldReports.CRI.Barcode NuGet package, and install it in your application.

BoldReports.CRI.Barcode installs into your application. Click OK. The assembly is then added to the respective project references.

BoldReports.CRI.Barcode NuGet package is available with Bold Reports^® release version 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 barcode extension in the Report Designer application, follow these steps.

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

       using BoldReports.Web;

2. Add the following code to register the extension assembly in the Startup method.

       public Startup(IConfiguration configuration, IWebHostEnvironment _hostingEnvironment)
       {
           //Use the below code to register extensions assembly into report designer
           ReportConfig.DefaultSettings = new ReportSettings().RegisterExtensions(new List<string> { "BoldReports.CRI.Barcode" });
   
           Configuration = configuration;
           env = _hostingEnvironment;
       }

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

Build and run the application. You can now render barcodes in the Report Designer and preview. To design barcode reports in the Report Designer, see Barcode report item.