How to Configure the Signature Widget in Bold Reports Designer for ASP.NET Core

This article provides a step-by-step guide to configuring the Signature widget in the embedded Bold Reports Designer for your ASP.NET Core application. It enables report authors to add signature fields that users can draw directly on the report canvas.

Step-by-Step Instructions

Step 1: Install the Signature NuGet Package

1. First, install the Custom Report Item (CRI) package for signatures. Open your terminal or NuGet Package Manager and run:

dotnet add package BoldReports.CRI.Signature

Step 2: Register the Extension in Your Application

1. To make the Signature widget available to the report engine, register the extension during application startup.
2. In Program.cs (or Startup.cs for older versions), add the following code:

using BoldReports.Web;

// Register the Signature extension assembly into the report designer
ReportConfig.DefaultSettings = new ReportSettings().RegisterExtensions(new List<string> 
{ 
    "BoldReports.CRI.Signature" 
});

Step 3: Update the Controller

1. Pass the extension metadata to the View so the Designer can display the Signature item in the toolbox.
2. Update your HomeController.cs (or the controller rendering the designer):

public IActionResult Index()
{
    // Initialize the list for custom report item extensions
    var extensions = new List<BoldReports.Models.ReportDesigner.ReportItemExtensionsModule>();
    
    var signatureExtension = new BoldReports.Models.ReportDesigner.ReportItemExtensionsModule
    {
        Name = "ESignature",
        ClassName = "EJSignature",
        ImageClass = "customitem-signature",
        DisplayName = "Signature",
        Category = "Signatures"
    };

    extensions.Add(signatureExtension);
    ViewBag.ReportItemExtensions = extensions;

    return View();
}

Step 4: Include Required Scripts and Styles

1. The Signature widget requires specific JavaScript and CSS files to function correctly in the browser. Ensure these files are available in your wwwroot folder (typically under wwwroot/scripts/bold-reports/extension/).
2. Add the following references to your _Layout.cshtml file or the View that contains the Report Designer:

<!-- Signature Widget Styles -->
<link href="~/scripts/bold-reports/extension/signature.reportitem.css" rel="stylesheet" />
<link href="~/scripts/bold-reports/extension/signature.dialog.css" rel="stylesheet" />

<!-- Signature Widget Scripts -->
<script src="~/scripts/bold-reports/extension/signature.reportitem.js"></script>
<script src="~/scripts/bold-reports/extension/signature.dialog.js"></script>

Step 5: Enable Embedded Image Data

1. Since signatures are captured as image data, configure the report model to embed this data. In your ReportDesignerController (Web API controller), set the EmbedImageData property to true:

[HttpPost]
public object PostDesignerAction(Dictionary<string, object> jsonResult)
{
    var reportOption = ReportDesignerHelper.GetReportOptions(jsonResult);
    
    // Enable image data embedding for signature capture
    reportOption.ReportModel.EmbedImageData = true; 
    
    return ReportDesignerHelper.ProcessDesigner(jsonResult, this, null);
}

Step 6: Preview and Test the Widget

After completing the configuration:

1. Run your application to render the Bold Reports Web Designer.
2. Locate the Signature item in the toolbox under the Signatures category.
3. Drag and drop the Signature item onto the design canvas.
4. In the Properties panel, click Draw under Basic Settings to open the signature pad and test the drawing capability.
   
   
   
   Caption: Drag the Signature widget onto the canvas and access the Draw settings.

See Also

• How to Add Custom Report Items to Bold Reports
• Registering Extensions in Bold Reports Designer
• Working with Images in Bold Reports