One of the easiest ways to create nice looking HTML templates is by using Microsoft Word (or really any text editor capable of outputting HTML). Let’s say I create a document in Word that looks like this:
Note the relatively basic formatting such as bold, underline, text color and font changes. Now, if I save (File –> Save As) this file as a .html file I can then open it in notepad and copy the HTML.
Now just select all of the HTML code in the Notepad file, copy it, and paste it into your notification template:
Then find the various places in the HTML that you need to insert properties and add those using the ‘Insert…’ button as before. For example the user’s first name after ‘Dear’:
Now you will get a nicely formatted email message that could look something like this:
Now, let’s get a little bit fancier. There are two more things I want to show you:
1) Adding images to an email.
2) Passing context from the object you are notifying about through to a web site via the QueryString.
First, to add images to an email, you need to make sure your images are hosted on some web server on your intranet. If they are on the Internet you’ll get the little red X in your Outlook (or other email client) for privacy/security reasons. Note: you can add the sender to your ‘Safe Senders’ list in Outlook to avoid getting the red ‘x’ for images hosted on the Internet.
Add a line of HTML to your template that looks like this:
< img src="http://www.blogger.com/SomeImageFile.jpg" > where you put the URL to your file in the src attribute. In my case I added this:
<img src="http://www.blogger.com/LogoFile.png" > after the signature in the email template HTML and now I get this in the email…
Next, let’s say you wanted to send your users to a website to fill out a survey about their satisfaction and you want to pass some context of the incident such as the incident ID to the survey site so the data can be correlated. One way to do this is by passing data on the “QueryString” part of the URL. The QueryString is the part that comes after the ‘?’ in most URLs. For example, let’s say that I have a survey site running on my server ‘surveyserver’. The URL might look something like this:
http://surveyserver/newsurvey.aspx?incidentID=IR232
What we need to do is pass the Incident ID of the incident that we are sending the notification about as part of the QueryString when the user clicks on the link. In other words, the ID number after ‘…?incidentID=’ in the URL needs to be different for each incident that we are notifying about and that number needs to be substituted in at the time we send the email similar to how we substituted it in above. Only in this case, we don’t want to actually show the ugly URL to the user (especially since it could be really long).
To do this you can put some more HTML in your template that looks like this:
Please take our < a href="http://www.blogger.com/%E2%80%9Dhttp://surveyserver/newsurvey.aspx?incidentID=<font" color="#008040">$Context/Property[Type=’WorkItem!System.WorkItem’]/Id$”>customer satisfaction survey.
Remember that you can insert the $Context.. part using the ‘Insert…’ button.
Now when the user gets the mail it will have a link in it like this:
And when the user clicks on the link you can see that ‘IR26’ is passed on the QueryString to the web site.
Given this information and the power of HTML, only your creativity can limit you when it comes to sending notifications in Service Manager!
Referred from : http://blogs.technet.com/b/servicemanager/archive/2009/09/28/creating-notification-templates-in-system-center-service-manager.aspx