VZLA
Databricks Employee
Databricks Employee

I'd like to suggest trying it out first in a notebook, confirm the HTML code is working as per your expectations before implementing it. Hope the below helps.

Notebook Cell #1 (Python Lang)

 

%python
html_template = """
<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Calibri, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
th {
    color: #FFF;
    background-color: #000000;
}
tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>
<h2>TraKic_Store_Count_Check</h2>
<p><b>Key Statistics</b></p>

<table>
    <tr>
        <th>bm_reporting_region_nm</th>
        <th>DiKerence</th>
    </tr>
    {{#QUERY_RESULT_TABLE}}
    <tr>
        <td>{{bm_reporting_region_nm}}</td>
        <td>{{DiKerence}}</td>
    </tr>
    {{/QUERY_RESULT_TABLE}}
</table>
</body>
</html>
"""

 

Notebook Cell #2 (Python Lang)

 

%python
# Sample data that simulates the query result
data = [
    {"bm_reporting_region_nm": "Region A", "DiKerence": 100},
    {"bm_reporting_region_nm": "Region B", "DiKerence": 200},
    {"bm_reporting_region_nm": "Region C", "DiKerence": 300}
]

# Generate table rows based on the sample data
rows_html = ""
for row in data:
    rows_html += f"<tr><td>{row['bm_reporting_region_nm']}</td><td>{row['DiKerence']}</td></tr>"

# Replace the placeholder tags in the template
rendered_html = html_template.replace("{{#QUERY_RESULT_TABLE}}", rows_html).replace("{{/QUERY_RESULT_TABLE}}", "")

# Display the rendered HTML in the notebook
from IPython.display import display, HTML
display(HTML(rendered_html))

 

Your template looks good to me, I did not try it via an Alert though, can you check if replacing {{#QUERY_RESULT_TABLE}} and {{/QUERY_RESULT_TABLE}} with {{#QUERY_RESULT}} and {{/QUERY_RESULT}} helps in rendering.

Also make sure the query behind the alert returns rows of data during alert evaluation; if there are no rows, the template won’t render any data rows. You can use {{#QUERY_RESULT}} to check if data exists and {{^QUERY_RESULT}} (inverted section) to handle the case when no data is present. This will at least help you with debugging.

 

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Calibri, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
th {
    color: #FFF;
    background-color: #000000;
}
tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>
<h2>TraKic_Store_Count_Check</h2>
<p><b>Key Statistics</b></p>

<!-- Conditional block to display message if there are no results -->
{{^QUERY_RESULT}}
<p>No data available for the selected criteria.</p>
{{/QUERY_RESULT}}

<!-- Conditional block to render table only if data is present -->
{{#QUERY_RESULT}}
<table>
    <tr>
        <th>bm_reporting_region_nm</th>
        <th>DiKerence</th>
    </tr>
    <tbody>
        {{#QUERY_RESULT}}
        <tr>
            <td>{{bm_reporting_region_nm}}</td>
            <td>{{DiKerence}}</td>
        </tr>
        {{/QUERY_RESULT}}
    </tbody>
</table>
{{/QUERY_RESULT}}

</body>
</html>