Email Notification Message HTML Being Modified by System on Update

[jlaps]

So our email notifications have complex formatting using tables, and if ANY thing is changed within the notification itself, even if nothing to do with the formatting, the system changes the formatting of the MESSAGE HTML and breaks the tables and view. We have to manually copy the HTML MESSAGE from the list view to notepad, make the changes to the notification that is needed, and after updating so we are back in the list view, then copy the notepad code back into MESSAGE HTML from the list view.

This is dumb and is being consistently forgotten by people, resulting in broken notifications. I am trying to devise a solution.

I have created a new VALID HTML field of the same type as MESSAGE HTML and copied the good code into this new field. I tried with an UPDATE AFTER business rule, or ASYNC, but I don't think it is possible from a RULE to get the good code in there as it always gets updated and broken.

Can you think of a good way to copy back the good HTML after editing a notification?

[jlaps]

This is the VALID HTML code-

<h1 ${mail_script:element.inline_style.generator.title}>
  Issue assigned to your group
</h1>

${mail_script:element.inline_style.generator.empty_string}
<p ${mail_script:element.inline_style.generator.text}>
  Hello ${caller_id.first_name},
</p>
${mail_script:element.inline_style.generator.empty_string}
<p ${mail_script:element.inline_style.generator.text}>
  The Issue, noted below, has been assigned to your group.
</p>
${mail_script:element.inline_style.generator.empty_string}

<h2 ${mail_script:element.inline_style.generator.subtitle}>
  Details
</h2>

<table ${mail_script:element.inline_style.generator.table}>
  <tbody>
    <tr ${mail_script:element.inline_style.generator.tr}>
      <th ${mail_script:element.inline_style.generator.th}>Number</th>
      <td ${mail_script:element.inline_style.generator.td}>${mail_script:element.esc_portal.inc.number.link.styled}</td>
    </tr>
    <tr ${mail_script:element.inline_style.generator.tr}>
      <th ${mail_script:element.inline_style.generator.th}>Caller</th>
      <td ${mail_script:element.inline_style.generator.td}>${caller_id}</td>
    </tr>
    <tr ${mail_script:element.inline_style.generator.tr}>
      <th ${mail_script:element.inline_style.generator.th}>Short Description</th>
      <td ${mail_script:element.inline_style.generator.td}>${short_description}</td>
    </tr>
    <tr ${mail_script:element.inline_style.generator.tr}>
      <th ${mail_script:element.inline_style.generator.th}>Priority</th>
      <td ${mail_script:element.inline_style.generator.td}>${mail_script:priority.color.code} ${priority}</td>
    </tr>
    <tr ${mail_script:element.inline_style.generator.tr}>
      <th ${mail_script:element.inline_style.generator.th}>Assignment Group</th>
      <td ${mail_script:element.inline_style.generator.td}>${assignment_group}</td>
    </tr>
    <tr ${mail_script:element.inline_style.generator.tr}>
      <th ${mail_script:element.inline_style.generator.th}>Opened</th>
      <td ${mail_script:element.inline_style.generator.td}>${opened_at}</td>
    </tr>
    <tr ${mail_script:element.inline_style.generator.tr}>
      <th ${mail_script:element.inline_style.generator.th}>Description</th>
      <td ${mail_script:element.inline_style.generator.td}>${description}</td>
    </tr>
  </tbody>
</table>

${mail_script:element.inline_style.generator.empty_string}
<div ${mail_script:element.inline_style.generator.button_wrapper}>
  ${mail_script:element.esc_portal.go_to_inc.button_link.styled}
</div>

${mail_script:element.inline_style.generator.empty_string}
<p ${mail_script:element.inline_style.generator.text}>
  Please review the Issue and take the appropriate action, you can do so by clicking the number above or going to ${mail_script:element.esc_portal.myincidents.link.styled} in ElementAssist.
</p>
${mail_script:element.inline_style.generator.empty_string}

And this is what it looks like when I put a letter or word into the description field and update (which should in theory do nothing to the formatting, but thanks to whatever 'helper' code SN has...)

<h1 title="">Issue assigned to your group</h1>
<p>${mail_script:element.inline_style.generator.empty_string}</p>
<p>Hello ${caller_id.first_name},</p>
<p>${mail_script:element.inline_style.generator.empty_string}</p>
<p>The Issue, noted below, has been assigned to your group.</p>
<p>${mail_script:element.inline_style.generator.empty_string}</p>
<h2>Details</h2>
<table>
<tbody>
<tr>
<th>Number</th>
<td>${mail_script:element.esc_portal.inc.number.link.styled}</td>
</tr>
<tr>
<th>Caller</th>
<td>${caller_id}</td>
</tr>
<tr>
<th>Short Description</th>
<td>${short_description}</td>
</tr>
<tr>
<th>Priority</th>
<td>${mail_script:priority.color.code} ${priority}</td>
</tr>
<tr>
<th>Assignment Group</th>
<td>${assignment_group}</td>
</tr>
<tr>
<th>Opened</th>
<td>${opened_at}</td>
</tr>
<tr>
<th>Description</th>
<td>${description}</td>
</tr>
</tbody>
</table>
<p>${mail_script:element.inline_style.generator.empty_string}</p>
<div>${mail_script:element.esc_portal.go_to_inc.button_link.styled}</div>
<p>${mail_script:element.inline_style.generator.empty_string}</p>
<p>Please review the Issue and take the appropriate action, you can do so by clicking the number above or going to ${mail_script:element.esc_portal.myincidents.link.styled} in ElementAssist.</p>
<p>${mail_script:element.inline_style.generator.empty_string}</p>

Again this is what the end product looks like with good code-

And after updating anything in the notification-

[Kieran Anson]

Thanks jlaps,

So a bit of checking and this isn't SN's HTMLSanitizer that's stripping your formatting but TinyMCE v5 itself (which SN uses) that strips out invalid HTML. Looking at their documentation, it doesn't look possible to disable this behaviour https://www.tiny.cloud/docs/tinymce/latest/content-filtering/

As a validation step, I added tinymce_allow_all=true to the html field but it resulted in the below behaviour

Using one of your mail scripts as an example (${mail_script:element.inline_style.generator.tr}) is it returning more than one attribute key and value? Reason being, if you did the following, it's not stripped as it's considered valid HTML

[jlaps]

I am certainly not great at this, but I think to answer your question, no we are not returning more than one attribute:value.

element.inline_style.generator.tr

(function runMailScript(current, template, email, email_action, event) {

	template.print(
		'style="border-bottom: 1px solid #E4E4E4;"'
	);

})(current, template, email, email_action, event);

element.inline_style.generator.table

(function runMailScript(current, template, email, email_action, event) {

	template.print(
		'role="presentation" border="0" width="500" cellspacing="0" cellpadding="0" align="left" bgcolor="#FFFFFF" style="border-collapse: collapse; border-spacing: 0; border: 0; padding: 0; width: 500px; background: #FFFFFF; font-family: Lato, Arial, sans-serif; text-align: left; margin: 10px 20px !important;"'
	);

})(current, template, email, email_action, event);

I appreciate your efforts on this! I had been warned that SN does not handle HTML well, and it seems to be the case. Our emails look different between Mac/PC versions of Outlook too, possibly for similar reasons?? where the columns as shown in the email examples above, the left side headers look fine, but the right-side text gets scrunched up in narrow margins and does not look like it does in the preview (Windows version only).

I have a work-around at least so I can restore these when they inevitably get ruined when someone changes a condition or whatever, which I will take as a partial win.

[jlaps]

I created a fix script that will copy the VALID HTML to MESSAGE HTML, and that does fix things, but ideally I would be able to call this when the notification gets updated rather than just run hourly or whatever. If you have a clever idea... 🙂