NOTE: MY POSTINGS REFLECT MY OWN VIEWS AND DO NOT NECESSARILY REPRESENT THE VIEWS OF MY EMPLOYER, ACCENTURE.
DIFFICULTY LEVEL: INTERMEDIATE to ADVANCED
Assumes having taken the class SSNF and has good intermediate level of knowledge and/or familiarity with Scripting in ServiceNow and HTML/CSS.
Continuing from my previous article: Mini-Lab: Adding CSS To an Email Notification - Part 1 I would like to show how we can move beyond the inline Style attribute formatting to a Style section with Class attributes. This is a much better way to organize and simplify CSS in your HTML. Remember not all email services support this method! I present it here as another tool for your toolbox.
Prerequisites:
1. Work through the Part 1 article labs.
2. You can no longer send emails from a PDI (no matter that you set up the properties correctly). Read here for further info: https://developer.servicenow.com/blog.do?p=/post/sending-emails-from-pdis/
3. Unfortunately with the disabling of email sending from our PDIs we can no longer test using any form of account. In this case with Outlook; which is necessary for successful completion of this lab. So, that part is going to have to be done as a thought exercise sorry.
4. You will still need to fill in the Outbound Email Configuration as if you were going to use it though.
- Navigate to System Properties -> Email Properties
- Make sure Email sending enabled is checked
- Fill in the Send all email to this test email address (non-production testing) field with a bogus properly formatted email address (I used: myemail@outlook.com).
Lab 1.1: Style Tag Section
This type of style allows you to clean up your HTML by creating aliases to represent groupings of CSS statements. This is done through the class attribute which will be placed where you would normally put an inline style attribute. We will be taking the Email Notification Template we developed in the original Email Notification Scripts article, and enhancing it with HTML and a CSS Style section.
1. Navigate to System Notification -> Email -> Templates. A list view of all Email Templates will be displayed.
2. Pick our email template named: incident.ess.resolve.css.
3. Copy out the Message content to your editor. We will be re-building our HTML around this text.
4. Here is the original message:
Your incident ${number} has been resolved and will automatically close ${mail_script:autoCloseStatement}. If you feel the issue is not resolved, please click the following link to reopen your incident:
${mailto:mailto.unsatisfied}
Short description: ${short_description}
Priority: ${priority}
Category: ${category}
Comments:
Additional comments: ${comments}
<hr/>
Click here to view Incident: ${URI_REF}
5. Again, like last time, while still in your text editor we will next be adding the HTML to the message to make it look nicer. We will add a table and do a double-column to arrange and organize things.
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">Your incident ${number} has been resolved and will automatically close ${mail_script:autoCloseStatement}. If you feel the issue is not resolved, please click the following link to reopen your incident: ${mailto:mailto.unsatisfied}</td>
</tr>
<tr>
<td>Short Description: </td>
<td>${short_description}</td>
</tr>
<tr>
<td>Priority: </td>
<td>${priority}</td>
</tr>
<tr>
<td>Category: </td>
<td>${category}</td>
</tr>
<tr>
<td>Additional comments: </td>
<td>${comments}</td>
</tr>
<tr>
<td colspan="2"><hr/></td>
</tr>
<tr>
<td>Click here to view Incident: </td>
<td>${URI_REF}</td>
</tr>
</table>
a. You can copy this code and jump to Try HTML, and replace everything between the body tags. Then click the See Result button to verify that you have the formatting essentially correct.
6. I will be re-using my super spiffy graphic, and colors from the last article.
7. Now let's add in the CSS!
a. Create a style section in front of our <table> tag.
<style type="text/css">
.tableFormatting {width:650px;border:1px solid LightBlue;padding-bottom:10px;}
.tableHeading {background-color:DarkSlateBlue;padding-left:5px;width:55%;color:White;font-weight:bold;font-size:13px;}
.labelText {padding:5px;width:30%;background:Gold;font-weight:bold;font-size:12px;border:1px solid LightBlue;font-family:Arial, Helvetica, sans-serif;}
.variableText {padding:5px;width:59%;font-size:12px;background:Khaki;border:1px solid LightBlue;font-family:Arial, Helvetica, sans-serif;}
.altLabelText {padding:5px;width:30%;font-weight:bold;background:Yellow;border:1px solid LightBlue;font-size:12px;font-family:Arial, Helvetica, sans-serif;}
.altVariableText {padding:5px;font-size:12px;width:59%;border:1px solid LightBlue;background:Orange;font-family:Arial, Helvetica, sans-serif;}
</style>
Each of the "dot" labels are the class definitions we will be using as aliases in the follow-on HTML.
b. Now add these into HTML. Your final HTML should look something like this:
<style type="text/css">
.tableFormatting {width:650px;border:1px solid LightBlue;padding-bottom:10px;}
.tableHeading {background-color:DarkSlateBlue;padding-left:5px;width:55%;color:White;font-weight:bold;font-size:13px;}
.labelText {padding:5px;width:30%;background:Gold;font-weight:bold;font-size:12px;border:1px solid LightBlue;font-family:Arial, Helvetica, sans-serif;}
.variableText {padding:5px;width:59%;font-size:12px;background:Khaki;border:1px solid LightBlue;font-family:Arial, Helvetica, sans-serif;}
.altLabelText {padding:5px;width:30%;font-weight:bold;background:Yellow;border:1px solid LightBlue;font-size:12px;font-family:Arial, Helvetica, sans-serif;}
.altVariableText {padding:5px;font-size:12px;width:59%;border:1px solid LightBlue;background:Orange;font-family:Arial, Helvetica, sans-serif;}
</style>
<table cellpadding="0" cellspacing="0" class="tableFormatting">
<tr>
<td class="tableHeading" colspan="2">
<img src="Pizza_Palace_Header.png" height="52" width="650"/>
</td>
</tr>
<tr>
<td class="tableHeading" colspan="2">Your incident ${number} has been resolved and will automatically close ${mail_script:autoCloseStatement}. If you feel the issue is not resolved, please click the following link to reopen your incident: ${mailto:mailto.unsatisfied}</td>
</tr>
<tr>
<td class="labelText">Short Description: </td>
<td class="variableText" >${short_description}</td>
</tr>
<tr>
<td class="altLabelText">Priority: </td>
<td class="altVariableText">${priority}</td>
</tr>
<tr>
<td class="labelText" >Category: </td>
<td class="variableText">${category}</td>
</tr>
<tr>
<td class="altLabelText">Additional comments: </td>
<td class="altVariableText">${comments}</td>
</tr>
<tr>
<td class="labelText" colspan="2"><hr/></td>
</tr>
<tr>
<td class="altLabelText" >Click here to view Incident: </td>
<td class="altVariableText">${URI_REF}</td>
</tr>
</table>
This is a much more organized approach than inline style attributes!!! I just wish I could us this in Google Mail! I'm crying here!
8. Test out your new formatting by dropping the HTML into Try HTML. Your result should look something like this:
9. OPTIONAL: Now the final step is to minify (one-line) it. Do this in your editor. Again I am using Notepad++ here.
NOTE: I figured out that unlike the old method, SN has upgraded the editor to a real HTML field and you don't have to minify/one-line/linerize the HTML anymore. The wonders of modern technology. A lot has happened in the six years since I originally wrote this article! 😎
10. Copy the one-lined HTML. In your Message HTML editor click on the "<>" button and replace the Message HTML field in your Notification Email Template. Your Email Template should look something like this:
Your email template should look something like this:
11. Click the Update button to save your changes.
12. Navigate to System Notifications -> Email -> Notifications. The Email Notifications list view will be displayed.
13. From the List View click on the "all" as we want to see everything both active and inactive. Filter for Incident Resolved.
14. From the List View deactivate the Incident Resolved CSS Google notification, and activate the Incident Resolved CSS notification (if inactive). You may need to personalize your List View to add the Active field to the view.
Now your all set to test!!!
Lab 1.2: Testing The Notification Script
So, just like we tested it all in the last article. It is pretty much the same here.
- Navigate to Incident -> Open. The Open Incidents list view will be displayed. FYI, make sure that the user is activated and has an email address in their respective user record.
- Click on an Incident whose status is not Resolved. The Incident form will be displayed. Note the Incident number.
- Click on the Resolve button at the top-right of the form. A pop-up will be displayed stating that you have fill in a handful of required fields. Do so, and then click on the Resolve button again. This should mark the incident as resolved.
- Navigate to System Logs -> Emails. This will display the Email Log list view.
- Filter for Subject contains "has been resolved". You should see the email notification sent out for your incident number. Edit this notification up.
- Scroll down the form to the related links and click the Preview Email link.
- Examine the notification body and verify that there the text contains something like:
"Your incident INC0000027 has been resolved and will automatically close in 7 days. If you feel the issue is not resolved, please click the following link to reopen your incident:"
Looks good! Well, I like it anyway.
Lab 1.3: Outlook Security and Graphics
Finally I would like to address the Outlook security issue a twitch more. Essentially if your organization has cranked down on security the basic graphic notation we have been using will break. You will need to use the .iix reference.
- Navigate to System UI -> Images. The Images list view will be displayed.
- Edit up your graphic that you uploaded in the previous article. I will be using my really nifty header graphic as an example.
- Right-click on the graphic, and pic Copy Image Link. If you paste this in your text editor you will find it is a bit different than what you have been using. It should look something like this:
The address should look something like this:
https://dev123456.service-now.com/a3617fcf97c6355091807f200153afce.iix
4. Use this in place of the reference in the <img> tag.
5. Test this out in Try HTML and you will see that the graphic now resolves.
And you are done! This should work great in your secure Outlook environment. Watch it as it seems to bust otherwise. Test! Test! Test!
There you have it! You now have a hatful of techniques you can use to make stunning, brilliant, vibrant, and eye-watering content in your ServiceNow outbound emails!
BTW, I found this article to be an interesting read: Using CSS in HTML Emails.
Enjoy!
Steven Bell.
If you find this article helps you, don't forget to log in and mark it as "Helpful"!
Originally published on: 11-12-2015 09:25 AM
I updated the code and brought the article into alignment with my new formatting standard.
