Solved: Re: Does Dynatrace Email Notification Problem Body Support JavaScript?

Sanket_Molavade · ‎24 Feb 2025

Hi Team,

I am working on customizing the Dynatrace email problem notification as per client requirements in a Dynatrace Managed environment. I have successfully formatted most of the email using HTML and inline CSS to meet the expected design.

However, I am facing an issue with the final customization. I need to dynamically change the color and format of the problem details based on the severity level of the problem. Since HTML and inline CSS alone cannot achieve this conditional styling, I attempted to use JavaScript for applying color changes based on severity.

Unfortunately, the JavaScript does not seem to work in the email body.

🔍 Can anyone confirm if JavaScript is supported in the Dynatrace problem notification email body? Or suggest any alternative approaches to achieve conditional styling based on severity?

Please check the below problem body for the same.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=us-ascii">
</head>
<body>
    <table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%; max-width: 50rem;">
        <tr>
            <td style="border: solid #B42C2F; border-width: medium; color: #000000; text-shadow: 0px 0px 2px #ffffff; background-color: #B42C2F; border-style: solid; border-color: #B42C2F; border-width: medium;" width="30%">CRITICAL Event</td>
            <td style="border-style: none;"></td>
            <td style="border-style: none;"></td>
        </tr>
        <tr>
            <td style="border-style: solid; border-color: #B42C2F; border-width: medium;" colspan="3">
                <h1 style="font-size: 20px; font-family: arial, sans-serif;">Critical Event Notification</h1>
                <table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%; max-width: 50rem;">
                    <tr>
                        <td style="border: 1px solid #dddddd; text-align: left; padding: 2px; width: 25%;">Node Name</td>
                        <td style="border: 1px solid #dddddd; text-align: left; padding: 2px;">Server-01</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #dddddd; text-align: left; padding: 2px; width: 25%;">Business Service</td>
                        <td style="border: 1px solid #dddddd; text-align: left; padding: 2px;"> Test Processing</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #dddddd; text-align: left; padding: 2px; width: 25%;">First Occurrence (Asia/Dubai)</td>
                        <td style="border: 1px solid #dddddd; text-align: left; padding: 2px;">2023-10-25 14:30:00</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #dddddd; text-align: left; padding: 2px; width: 25%;">Organization</td>
                        <td style="border: 1px solid #dddddd; text-align: left; padding: 2px;">ABCD Test Processing</td>
                    </tr>
                    <tr style="color: #B42C2F;">
                        <td style="border: 1px solid #dddddd; text-align: left; padding: 2px; width: 25%;">Message</td>
                        <td style="border: 1px solid #dddddd; text-align: left; padding: 2px;">High CPU usage detected</td>
                    </tr>
                </table>
                <table style="border: none;">
                    <tr style="border: none;">
                        <td style="border: none; width: 12px;"></td>
                        <td style="border: none;">
                            <a href="https://example.com/event/123" style="background-color: #B42C2F; border: none; color: #000000; padding: 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: arial, sans-serif; margin: 4px 2px; cursor: pointer; border-radius: 12px;">View This Event</a>
                        </td>
                        <td style="border: none; width: 12px;"></td>
                    </tr>
                </table>
                <table style="border: none;">
                    <tr style="border: none;">
                        <td style="border: none; width: 12px;"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Thanks in advance!

MaciejNeumann · ‎24 Nov 2025

Hello @Sanket_Molavade,

According to this Documentation article it is not possible at the moment:

Format email
Attaching an image or inserting JavaScript code into the email body is impossible. It's just shown as plain text.

If you have any questions about the Community, you can contact me at maciej.neumann@dynatrace.com

txvepr · ‎05 Dec 2025

Does this restriction also apply for HTML formatting? I am trying something similar with a Workflow sending an email with a html table embedded that holds data from DQL .

Is that possible ?

O11y_Noob · ‎15 Dec 2025

through workflows , yes , you can run the DQL in a block and give the result to the Java Script blocks for formatting in to a markdown table and then add Jinja Expressions to refer to the JS output in the send notification Email block

txvepr · ‎07 Jan 2026

This seems to be only to a point-formatting- is only being able to Bold or italicize the text. However, We need to be able to format an output in a Professional, table layout much like the original post wants. The email should be able to show an HTML based table of data. We can do the javascript step to design the html output, but the email step does not render it. Does that make sense?

Executives would like a formal looking output rather than basic rows of data. This would look much better for Dynatrace production.