How to Embed Custom HTML Content in Bold Reports Using the HTML Report Item

The HTML Report Item allows you to add custom HTML content directly to a report. This enables you to include styled tables, formatted text, lists, links, and other HTML-based elements within the report layout.

This article explains how to add and configure the HTML Report Item in the Bold Reports Designer.

Prerequisites

Before you begin, ensure the following requirements are met:

Bold Reports Designer version 5.0 or later
Basic knowledge of HTML and CSS
A report opened in the designer

Step-by-Step Guide

1. Open the Report in the Designer

Launch the Bold Reports Designer (web or desktop).
Open the report where you want to add custom HTML content.

2. Add the HTML Report Item

In the Report Items toolbox on the left panel, locate HTML.
Drag and drop the HTML Report Item onto the design surface at the desired location.
Resize the item using the corner handles to fit the required content.

Dragging HTML Report Item onto the report canvas

3. Configure the HTML Content

Select the HTML Report Item to open the Properties panel.
In the HTML section, enter or paste the required HTML code in the HTML property.

Example: Styled Sales Report Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Tablix Report</title>
    <style>
        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        caption {
            font-size: 1.1em;
            font-weight: bold;
            padding: 10px;
        }
        .total-row {
            font-weight: bold;
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <table>
        <caption>Sales Report</caption>
        <thead>
            <tr>
                <th>Product</th>
                <th>Category</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Laptop</td>
                <td>Electronics</td>
                <td>5</td>
                <td>$800</td>
                <td>$4000</td>
            </tr>
            <tr>
                <td>Desk</td>
                <td>Furniture</td>
                <td>3</td>
                <td>$150</td>
                <td>$450</td>
            </tr>
            <tr>
                <td>Mouse</td>
                <td>Accessories</td>
                <td>10</td>
                <td>$20</td>
                <td>$200</td>
            </tr>
            <tr class="total-row">
                <td colspan="2">Totals</td>
                <td>18</td>
                <td></td>
                <td>$4650</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

HTML content configured in the Properties panel

4. Preview the Report

Click Preview in the designer.
Verify that the HTML content renders correctly within the report.

Best Practices

Keep the HTML content self-contained by including styles within the <style> tag.
Use responsive design techniques when designing layouts for different screen sizes.
Test the report in both Designer Preview and Report Viewer.
For dynamic data, combine with report parameters or dataset expressions.

Supported HTML Tags

The Bold Reports Report Viewer supports a subset of HTML tags such as tables, divs, spans, lists, images, and links. Refer to the related article for the complete list of supported tags.

Was this article useful?

Dislike

Comments (0)