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!
