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.
In my previous article I showed how to use a Notification Email Script. In this article I will show a method for adding Style information to spice up the email presentation!
There are two flavors of CSS Styles that can be utilized:
1. Inline Styles. These are for primitive email handlers like Google Mail.
2. Style Sections and Class definitions. These are for the rest of the email handlers.
In this article we will be focusing on Inline Styles.
Prerequisites:
1. This article builds off of my previous article. So we will be using the Notification Template and testing found here: Mini-Lab: Email Notification Scripts
2. Familiarity with email notifications, and templates.
3. Familiar with HTML notation.
4. Familiarity with CSS style notation.
5. A good editor that does XML formatting, and preferably does one-lining of XML (one-lining). This latter will be important as ServiceNow Notification Emails work best with one-lining HTML. I will be using Notepad++ to do this, and I have developed a technique to quickly one-line and reverse such formatting (my technique? Undo of course).
6. 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/
7. 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: Inline Styles
This type of style is pretty straightforward. For every HTML tag you have to indicate what style you want applied to that line or section. So we will be taking the Email Notification Template we developed in the last article and enhancing it with HTML and inline CSS Styles.
1. Navigate to System Notification -> Templates. A list view of all Email Templates will be displayed.
2. Pick the email template from the previous lab named: incident.ess.resolve.css.
3. Copy out the Message HTML content to your favorite text editor. We will be building our HTML around this text.
4. Here is the original message (kind of bland isn't it?):
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. 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. Copy this code. Jump to Try HTML, and replace everything between the body tags. Then click the Run button.
You can see it organized the original data nicely. However, we can do better than that.
5. I decided to add a cool graphic to my email. I took a photo I had, edited it in Microsoft Paint, added some text, and saved it down.
- Navigate to System UI -> Images. The Images list view will be displayed.
- Click the New button.
- Fill out the form with something like this:
Active: checked
Category: General
Name: Pizza_Palace_Header.png
Image: <<upload your image here>>
d. Right-click on the form header and Save your work.
Notes:
After you add your image you will see a suggested link to reference your new image displayed on the form. This works great for most email handlers. It does NOT work for Microsoft Outlook. Especially if your network has additional email security. In this case you will need to use the .iix reference url. To obtain this right-click on your graphic and copy the url. This will be the .iix reference.
Copy down the height and width and url to use in your HTML. In my case it was:
<img src="Pizza_Palace_Header.png" width="1500" height="272"/>
Interesting to note that this won't work in Try HTML, but it will work in your email; as the source is embedded in the email html!
6. This will work in both Google Mail and others as is. However, some Microsoft Outlook implementations with security you will need to use the .iix reference. Now let's add in some CSS style code!
I chose my colors from the following location: HTML Color Names
Inline styles are simply added to the lines that can support them such as "table" and "td" as you see here. The following article does a decent job of explaining the HTML Style Attribute.
So I will add in some formatting, and fix the width, and mess with colors (don't laugh), and fonts, etc.
<table cellpadding="0" cellspacing="0" style="width:650px;border:1px solid DarkBlue;padding-bottom:10px;">
<tr>
<td colspan="2" style="background-color:DarkSlateBlue;padding-left:5px;width:55%;color:White;font-weight:bold;font-size:13px;">
<img src="Pizza_Palace_Header.png" width="1500" height="272"/>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:DarkSlateBlue;padding-left:5px;width:55%;color:White;font-weight:bold;font-size:13px;">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 style="padding:5px;width:30%;background:Gold;font-weight:bold;font-size:12px;border:1px solid LightBlue;font-family:Arial, Helvetica, sans-serif;">Short Description: </td>
<td style="padding:5px;width:59%;font-size:12px;background:Khaki;border:1px solid LightBlue;font-family:Arial, Helvetica, sans-serif;" >${short_description}</td>
</tr>
<tr>
<td style="padding:5px;width:30%;font-weight:bold;background:Yellow;border:1px solid LightBlue;font-size:12px;font-family:Arial, Helvetica, sans-serif;">Priority: </td>
<td style="padding:5px;font-size:12px;width:59%;border:1px solid LightBlue;background:Orange;font-family:Arial, Helvetica, sans-serif;">${priority}</td>
</tr>
<tr>
<td style="padding:5px;width:30%;background:Gold;font-weight:bold;font-size:12px;border:1px solid LightBlue;font-family:Arial, Helvetica, sans-serif;" >Category: </td>
<td style="padding:5px;width:59%;font-size:12px;background:Khaki;border:1px solid LightBlue;font-family:Arial, Helvetica, sans-serif;">${category}</td>
</tr>
<tr>
<td style="padding:5px;width:30%;font-weight:bold;background:Yellow;border:1px solid LightBlue;font-size:12px;font-family:Arial, Helvetica, sans-serif;">Additional comments: </td>
<td style="padding:5px;font-size:12px;width:59%;border:1px solid LightBlue;background:Orange;font-family:Arial, Helvetica, sans-serif;">${comments}</td>
</tr>
<tr>
<td style="padding:5px;width:30%;background:Gold;font-weight:bold;font-size:12px;border:1px solid LightBlue;font-family:Arial, Helvetica, sans-serif;" colspan="2"><hr/></td>
</tr>
<tr>
<td style="padding:5px;width:30%;font-weight:bold;background:Yellow;border:1px solid LightBlue;font-size:12px;font-family:Arial, Helvetica, sans-serif;" >Click here to view Incident: </td>
<td style="padding:5px;font-size:12px;width:59%;border:1px solid LightBlue;background:Orange;font-family:Arial, Helvetica, sans-serif;">${URI_REF}</td>
</tr>
</table>
Yuck (a technical term meaning: worst thing I have ever seen). Oh well, messy though the html may be; it is what works in Google Mail. 😛
Again copy the code and let's test it with Try HTML.
7. Now the final step is to min (one-line) it. Do this in your favorite editor. Again I am using Notepad++ here.
Your HTML should look something like this. We will be embedding this in our final code.
8. Copy the min'd HTML out of your editor and replace the Message HTML field in your Notification Email Template.
9. Change the name to: incident.ess.resolve.css.google
10. Click on the <> button and paste in your new Message HTML.
11. Click on Save.
12. Your form should look something like this:
10. Click the Update button to save your changes.
11. Navigate to System Notification -> Email -> Notifications. The Email Notifications list view will be displayed.
12. Search for notification named "Incident Resolved CSS". Edit this notification (we created this in the last article).
13. Change the Active field to un-checked, right-click the form header to bring up the context menu, and click Save. This deactivates the Notification we created in the last lab.
14. Change the following on the still open form:
- Name: Incident Resolved CSS Google
- Active: Checked.
- What it will Contain -> Email Template: incident.ess.resolve.css.google
NOTE: This is where we reference our new Email Notification Template. Also, I named it google because inline styles are the only thing that Google Mail understands.
d. Right click on the form header and choose Insert And Stay so that we do not save over our old Notification!
15. If you have not already done this in the previous article then right click on the form header and click on Configure -> Form Layout. The Form Layout form will be displayed.
a. Add the following fields:
Send Event to Creator
Force delivery
b. Click the Save button. This will return you to the Email Notification form.
NOTE: Send Event to Creator makes sure an email is sent (it should be checked automatically). Force delivery makes sure an email is sent even if the user has notification disabled (I just wanted to make sure the email is sent - a bit of overkill since in our prerequisites the users we will be using for testing should have Notification enabled).
16. Make sure both new fields are checked. Click the Submit button to save your work.
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 Incident button again. This should mark the incident as resolved.
- Navigate to System Policy -> Events -> Event log. The Event log list view will be displayed.
- Filter for the Name "incident.updated". You should see that this event has recently (within a couple of seconds) fired.
6. Navigate to System Logs -> Emails. This will display the Email Log list view.
7. Filter for Subject contains "has been resolved". You should see the email notification sent out for your incident number. Edit this notification up.
9. Scroll down the form to the related links and click the Preview Email link.
10. Examine the notification body and verify that there the text contains something like:
"Your incident INC0007001 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:"
Okay, okay, don't laugh, I am trying to make a point here!
Anyway, you get the idea. It is possible to do some pretty amazing things using this technique with the outbound emails. In the next article I will be showing how to set this up an alternative way: Through a Style section and Class tags; rather than inline.
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-10-2015 01:41 PM
I updated the code and brought the article into alignment with my new formatting standard.
1 Comment
