Email notification not rendering HTML

clyon
Tera Guru

My email template, Message HTML field I have the following code:

<!--Header table -->

<p></p>

<table style="height: 20%; width: 85%; background-color: white;" cellpadding="0">

<tbody>

<tr>

<td style="width: 20%;">

<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://xxxxxxx.service-now.com/Help%20Desk%20logo%2080x80.pngx" alt="" /></p>

</td>

<td>

<div style="font-family: helvetica; font-size: 18px; color: #68696e; vertical-align: middle;">Reminder:<strong> ${number}</strong>  is still pending approval</div>

</td>

</tr>

<tr>

<td style="width: 20%;">  </td>

<td>  </td>

</tr>

</tbody>

</table>

<!-- Email Body table -->

<table style="text-align: left; border-top: 4px solid #3C6D99; background: #fff;" width="99%" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td style="width: 10px;" colspan="8">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td style="width: 57%;">

<div style="font: bold 15px Helvetica; sans-serif; color: #000000;">${u_requested_for.first_name} ${u_requested_for.last_name},<br /><br /></div>

</td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td rowspan="2">

<div style="font: bold 15px Helvetica, sans-serif; color: #3c6d99; margin: 0 0 5px 0;">Request ID</div>

<div style="font: 12px Helvetica, sans-serif; color: #68696e;">

<div style="font: 12px Helvetica, sans-serif; color: #68696e;">${URI_REF}</div>

<div style="font: 10px Helvetica, sans-serif; color: #68696e;">  <em>   Click here to view more information</em></div>

</div>

</td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>

<div style="font: 14px Helvetica, sans-serif; color: #68696e;">Your requested item is still pending approval.</div>

</td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td style="vertical-align: middle;" rowspan="7">

<div style="font: 12px Helvetica, sans-serif; color: #000000;"><strong>Request details:</strong><br />${mail_script:sc_req_item_details}</div>

</td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td rowspan="3">

<div style="font: bold 15px Helvetica, sans-serif; color: #3c6d99; margin: 0 0 5px 0;">Request Status</div>

<div style="font: 12px Helvetica, sans-serif; color: #68696e;">${state}</div>

</td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td rowspan="3">

<div style="font: bold 15px Helvetica, sans-serif; color: #3c6d99; margin: 0 0 5px 0;"><strong>Requested  For</strong></div>

<div style="font: 12px Helvetica, sans-serif; color: #68696e;">${u_requested_for}</div>

</td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td style="vertical-align: middle;" rowspan="4">

<div style="font: 12px Helvetica, sans-serif; color: #000000;"><strong>Approval details:</strong></div>

<div style="font: 12px Helvetica, sans-serif; color: #000000;">${mail_script:sc_req_item_approvals_list}</div>

</td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td style="vertical-align: bottom;" rowspan="4">

<div style="font: bold 15px Helvetica, sans-serif; color: #3c6d99; margin: 0 0 5px 0;">Have any questions?</div>

<div style="font: 12px Helvetica, sans-serif; color: #68696e;">Don't hesitate to call us or chat online with one of our agents<br /><br /></div>

<div style="valign: bottom; font: 10px Helvetica, sans-serif; color: #68696e;"><a title="Help Desk Chat" href="https://helpdeskchat.xxxx.net" target="_blank"> <img style="align: baseline;" title="" src="https://xxxxxx.service-now.com/Chat%2020x20.pngx" alt="" width="20" height="20" align="baseline" border="" hspace="4px;" vspace="" /></a>  Chat    <a title="Email Help Desk" href="mailto:GlobalHelpDesk@xxxxx.com" target="Outlook"><img style="align: baseline;" title="" src="https://xxxxx.service-now.com/Email%2020x20.pngx" alt="" width="20" height="20" align="baseline" border="" hspace="4px;" vspace="" /></a>  Email    <img style="align: baseline;" title="" src="https://xxxxx.service-now.com/Phone%2020x20.pngx" alt="" width="20" height="20" align="baseline" border="" hspace="2px" vspace="" />HELP (4357)<br /><br /></div>

<div style="valign: bottom; font: 10px Helvetica, sans-serif; color: #68696e;"><em>Or call us directly by dialing (866) 123 1234</em></div>

</td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td><span style="font-size: 25px;">  </span></td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>

<div style="font: 14px Helvetica, sans-serif; color: #68696e;">Thank you, ${u_requested_for.first_name}, for working together with Help Desk Central<strong>!</strong></div>

</td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;">  </td>

<td>  </td>

<td>  </td>

<td style="border-right: 2px solid #3c6d99;">  </td>

<td>  </td>

<td>  </td>

<td>  </td>

<td style="width: 10px;">  </td>

</tr>

<tr>

<td style="width: 10px;" colspan="8">                </td>

</tr>

<tr>

<td style="border-top: 4px solid #3c6d99; width: 10px;" colspan="8">  </td>

</tr>

</tbody>

</table>

When I preview the email notification it previews as expected when I choose 'plain text'.

find_real_file.png

But when the email is sent all I see is the HTML code:

find_real_file.png

What am I missing to get the email to correctly render like the email review?   TIA

8 REPLIES 8

Dub Myers
ServiceNow Employee
ServiceNow Employee

Is it possible that you have put your HTML content into the "Message text' field? Make sure you put the HTML characters of your email message into the 'Message HTML' field.   Read on for a bit more detail.



Why two fields?



The email specification allow a single email message to contain multiple alternative versions of the same message. In email-speak, they end up as separate message parts in the sent email with types of 'text/plain' and 'text/html'.   Receiving email applications display one or the other depending on the email application's settings.   (It is reasonably common that some users have configured their application to never display HTML, preferring to read only plain text).



ServiceNow lets you provide either or both message versions via two message fields available in the notification: - Message Text and Message HTML.   Message Text ends up in the sent email's 'text/plain' message part, and the Message HTML ends up in the sent email's 'text/html' part.



If you supply message content in only one of these notification fields, and also indicate a content type of 'HTML and Plain Text', the system will do its best to generate the missing alternate version from the message field you did provide.   (For example, if you provide the Message HTML, ServiceNow generates the plain text alternative in the generated email.   It will do the opposite as well. If you find automatic conversion unsuitable, just provide the alternative missing message yourself in the notification's Advanced View to override this behavior.)



If HTML characters are put into the Message Text field, they are therefore not treated as HTML markup, but plain characters. ServiceNow believes you actually want that plain text literally represented in the email message as read by the recipient, and it will generate the missing HTML part, but as literal HTML markup characters.



if this is your case, the solution would be simple - just put your HTML markup in the Message HTML field.



Depending on your form view, you may need to use the 'Advanced view' of the Notification form to see both fields at the same time when HTML and Plain Text is selected.


Within the notification template, the code is in the Message HTML field. I do not have anything in the Message Text field.




Dub Myers
ServiceNow Employee
ServiceNow Employee

What product family are you using?



Here are a few things to double-check:



On the notification record:


1. Your notification record is configured for "HTML and Plain Text", correct?


2. Your notification's content comes from a notification template, so the notification itself contains nothing in either the Message Text and Message HTML fields, correct?   Double-check by right-clicking on the notification form and choosing "Show XML".   Look for the 'message' and 'message_html' fields and confirm they have no characters present.



On the template


Double check the template's fields' content using 'Show XML' here too.



On the generated email:


There are two corresponding fields for each message part in the generated email record   (sys_email).


  • Body holds the HTML version
  • Body Text holds the plaintext version.


1. What was put into the generated email record (sys_email) by the notification system?   What does each of these fields contain?


2. What happens when you preview the email generated by this notification?   On the Email form,   click "Preview HTML email" to see what got generated.


Community Alums
Not applicable

Hi ,

Am also facing the Same issue ,Did you got any Solutions for this Issue.