How to Customize the Parameter Null Checkbox Label in Bold Reports Viewer

Overview

By default, the Bold Reports Viewer displays the label Null for parameters that do not contain a value. This article explains how to customize the default Null label and replace it with Empty or any other custom text using the reportLoaded event in JavaScript or Angular.

Step-by-Step Instructions

Locate the reportLoaded event in your Report Viewer configuration. This event is triggered after the report has finished loading.
Add a setTimeout function to ensure that the parameter UI elements are fully rendered in the DOM before applying changes.
Use a jQuery selector to identify all elements with the .e-label class.
Check whether the label text is "Null" and replace it with your preferred text, such as "Empty".

JavaScript Implementation

Add the following code to your script section:

// Function triggered when the report is loaded
reportLoaded: function () {
    // Delay execution to ensure UI elements are rendered
    setTimeout(function () {
        $(".e-label").each(function () {
            if ($(this).text().trim() === "Null") {
                $(this).text("Empty"); // Replace "Null" with your custom text
            }
        });
    }, 500);
}

Angular Implementation

Add the following code to your app.component.ts file:

// Event handler for reportLoaded in Angular
reportLoaded: () => {
    setTimeout(() => {
        $(".e-label").each(function () {
            if ($(this).text().trim() === "Null") {
                $(this).text("Empty"); // Replace "Null" with your custom text
            }
        });
    }, 500);
}

Code Explanation

Code Snippet	Description
`reportLoaded`	Event triggered after the report is fully loaded in the Report Viewer.
`setTimeout`	Adds a short delay to ensure the parameter elements are available in the DOM before modification.
`$(".e-label")`	Selects the CSS class used for parameter labels in Bold Reports.
`$(this).text().trim()`	Retrieves and trims the label text before checking its value.

Preview

Download a sample application that demonstrates this customization from here.

Was this article useful?

Dislike

Comments (0)