Supporters of End User
Web

Creating HTML Emails with SPD Workflows

Current average rating is 5 stars. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:SharePoint Designer; Workflow; MOSS; WSS; 2007; 2010; Site Manager/Power User

 

I've recently performed some maintenance on a year-old project which uses the Collect Data from User workflow action. I really like this action because the workflow waits on it to be completed and then passes back the ID of the Task that it creates, so you can use it in your workflow.

One of the things I don't like is having to rely on the Task list to send out an email, which you can't customize. I like the way it looks, but I want to massage the content; I want to give more specific instructions; I want it the way I want it!

So I actually created two workflows:

  1. one on the Custom list that creates the task via Collect Data from User; and
  2. one on the Task list, which collects information from the task AND the list item that calls it and then sends an informative email to the user to whom the task is assigned

To get the look and feel of the default task email in Outlook, we'll use HTML. The trick with getting Outlook to output display HTML properly is to make sure:

  1. The email is a complete HTML document, with HTML, HEAD, and BODY tags, and
  2. That there are NO SPACES between the tags

Given those two gotchas, creating an HTML email is pretty straightforward.

We'll use a simpler example: sending an email to the team when a new Announcement is posted.

In SharePoint Designer (I'm using 2007, but the process will be similar in 2010 even if the screenshots aren't), create a new Workflow:

2011-03-11-HTMLEmails-01.png
Create a new Workflow from the "New document" icon

2011-03-11-HTMLEmails-02.png
Give the workflow a name, and set it to start when a new item is created

Before we dig into the workflow itself, let's set up some variables to use in our email.

2011-03-11-HTMLEmails-03.png
Create variables to use as building blocks for our HTML email

2011-03-11-HTMLEmails-04.png
Click Add… to create five variables of type String: eHead, eBody, eFoot, eMsg, & eSubj

Now that our variables have been created, click Next to start building the steps of the workflow.

2011-03-11-HTMLEmails-05.png
Screen clipping taken: 3/4/2011, 2:10 PM

Building the Email

The first step is to name our step. We'll only have one in our example, but it's still nice to name it in case we want to come in later and add some more functionality.

2011-03-11-HTMLEmails-06.png
Naming your step is a good practice, even if it's the only one.

2011-03-11-HTMLEmails-07.png
We'll be using this one a lot: Build Dynamic String

Even though this action is named "Build Dynamic String," it shows up in the workflow like this:

2011-03-11-HTMLEmails-08.png
Build… Store… we'll be accomplishing the same thing

Click dynamic string to open the String Builder dialog box:

2011-03-11-HTMLEmails-09.png
Add Lookup will be our friend in this workflow as we insert data from our list item.

The first variable we'll build is the email footer: eFoot. It's just text, so we'll get it out of the way first.

2011-03-11-HTMLEmails-10.png
Click Add Lookup and type in the closing tags: </TD></TR></TABLE></BODY></HTML>

Click OK, then on Variable: variable to choose one of our pre-created variables.

2011-03-11-HTMLEmails-11.png
Choose Variable: eFoot from the drop-down list

The rest will be a bit more involved, so let's walk through them:

Next, we'll create the eHead:

2011-03-11-HTMLEmails-12.png
This one is straight text, too, but a bit longer.

Here's the text for this one:

<HTML><HEAD><STYLE>TABLE.mail { border-collapse:collapse; width:100%; font: 8pt Tahoma; } TD.header { background:#F8F8F9; border:1px solid #E8EAEC; padding: 12pt 10px 20px 10px; font: 16pt Verdana} TD.body { border-top:1px solid #E8EAEC; border-bottom:1px solid #E8EAEC; padding: 12pt 10px 24pt 10px; font: 12pt Verdana} TD.footer { border-top:1px solid #E8EAEC; border-bottom:1px solid #9CA3AD; padding: 4pt 10px 4pt 10px; } A { color:#003399; text-decoration:none; } A:visited { color:#aa00aa; }.bodytext { font: 8pt Tahoma; color: #000000;}</STYLE></HEAD>

I copied this directly from the default Task email. Notice there are no spaces between the tags, and no breaks inside the STYLE tag.

Now, you have a choice to make on the next section: the opening of the BODY tag in HTML.

Within this snippet is an email header, so it has some dynamic content to it. You have three options for where to put this snippet:

  1. You could tack it onto the end of eHead;
  2. You could put it at the beginning of eBody; or
  3. You could create another variable to maintain it separately from the other pieces.

Here's the HTML we're going to start with:

<BODY class=bodytext><TABLE class=mail cellspacing=0 dir=ltr><TR class=header><TD class=header>Announcement: //Title//<br></TD></TR><TR class=body><TD class=body>

The dynamic part is the Title of the Announcement.

2011-03-11-HTMLEmails-13.png

2011-03-11-HTMLEmails-14.png

2011-03-11-HTMLEmails-15.png
Dynamic content for your email

I'm going to create a new variable for this: eBodyHead. (Hope that doesn't get too confusing!)

2011-03-11-HTMLEmails-16.png

2011-03-11-HTMLEmails-17.png
Creating a new variable on the fly

Now for the true body of our message:

Dear Team Member, <p class=body>//Poster// has just posted a new Announcement for the team. Don't miss it!</p><p class=body>To read the full announcement, go to <a href="http://site/subsite/Lists/Announcements/DispForm.aspx?ID=//AnnounceID//">Announcement: //Title//</a></p><p class=body>Sincerely,<br />Your Friendly Announcement Workflow</p>

Notice that I've identified Poster as a portion that will be dynamic. That's because I have the SPDActivities from Codeplex installed on my site. (http://spdactivities.codeplex.com) There's not much support for this set of activities and some of them don't really work the way you'd think they should. BUT, there are a couple of very powerful activities in this collection that I use on a regular basis. Lookup site user property is undoubtedly the one I use the most.

Here's a quick aside to walk through getting the name of a person (without the presence indicator), using Lookup site user property. (If you don't have this collection, you can include the person with presence indicator by choosing it from the Current Item, or you can simply leave the salutation as "Dear Team Member." Feel free to jump ahead, if this is your situation.)

Side Step: Looking up Data for a Site User

2011-03-11-HTMLEmails-18.png

2011-03-11-HTMLEmails-19.png
The Lookup site user property activity

2011-03-11-HTMLEmails-20.png
The Display Name property returns the full name of the user; you could also use First Name or Last Name.

2011-03-11-HTMLEmails-21.png
Click on the second this user and then click the fx button.

In our case, we want the name of the person who posted the Announcement, so we'll look up the Display Name of the Created By column.

2011-03-11-HTMLEmails-22.png
Choose Created by from the dropdown

I'll store mine in the variable, EmpName:

2011-03-11-HTMLEmails-23.png
A new variable for storing name of the Poster (Created by)

Back to the Email Body

This time, since we're working with a variable we created in the workflow (if you performed the previous step), we'll choose Workflow Data as our source and Variable: empName for the Field.

2011-03-11-HTMLEmails-24.png

For our link, we just need to include the ID of this Announcement.

2011-03-11-HTMLEmails-25.png

2011-03-11-HTMLEmails-26.png
We'll supply the ID in the querystring of the HREF link to the DispForm.aspx.

Add the Title, and we're done with the body of the message.

2011-03-11-HTMLEmails-27.png
All of the lookups are now filled in. Click OK to save it.

Let's build eSubj and then we'll put all the blocks together in an email.

2011-03-11-HTMLEmails-28.png
Toward a dynamic Subject line

Now, let's put the complete message together in the eMsg. (You can skip this step if you want and build the message in the email activity. But from a maintainability standpoint, it's nice to see your variables independent of the email itself.)

2011-03-11-HTMLEmails-29.png
Because we're working with the HTML elements for our Outlook email, don't introduce spaces between your tags by adding them between elements here!

Building the Email

Now that we have the building blocks, we can finish out our workflow by creating the email we'll send to the team.

2011-03-11-HTMLEmails-30.png

2011-03-11-HTMLEmails-31.png
With variables, our email creation becomes very straightforward: just two pieces of dynamic content!

Click OK and Finish; then test it out.

Create a new Announcement and (assuming you're part of the team) you get an email with HTML formatting.

2011-03-11-HTMLEmails-32.png
HTML Email in Outlook from an SPD Workflow.

…and the blue text is actually a link!

2011-03-11-HTMLEmails-33.png

Any questions?

Comments

Frank

Cool Information

Great to see your contributions again, but I'm still having problems with the 'Color' calendar.

Posted 14-Mar-2011 by Frank
Jim Bob Howard

Cool Information

Hi, Frank!
 
It's a been a bit since I've looked at the color-coded calendar, but I know Christophe has been fielding lots of those questions. Is there something specific I can help walk you through?
 
Blessings,
Jim Bob

Posted 15-Mar-2011 by Jim Bob Howard
Jose Antonio Morales

Good business

Dear Jim Bob! I think you just outlined a good business: having HTML templates ready for customization. Thanks for the article, I will use it for sure :)

Posted 15-Mar-2011 by Jose Antonio Morales
Jim Bob Howard

Thanks, Jose!

I agree. Having templates ready to go sure makes the whole process a lot easier! :)

Posted 17-Mar-2011 by Jim Bob Howard
Stephan Onisick

An Interesting approach

I found out recently trying to redesign a number of emails in SharePoint Designer that copy and paste was not an option.
 
I could copy in html. Then I had to stop and put in each variable. Then continue copying html.
 
I like your method with variables for reusuablity in the rest of the workflow.
 
thanks a fan,
 
Stephan

Posted 30-Apr-2012 by Stephan Onisick
Grace

Thank you so much!

This worked fantastically! :)

Posted 27-Mar-2013 by Grace
Chandra Andhe

Thank you

Great and easy to follow article saved me lot of pain and time :)

Posted 28-May-2013 by Chandra Andhe
Venkatesh R

Awesome

It's Really Great Article and Life Saver. Got exactly what am looking for. Thanks for sharing.

Posted 16-Oct-2013 by Venkatesh R
Chris

Getting Markup In Subject Line

I setup the variable for the subject line of the email but am getting the <div> tag before and after the Add Lookup value when displayed in the email. Is there a way to get rid of the markup in the subject line?

Posted 03-Dec-2013 by Chris
Fernando

Great! than you so much

That's amazing, a very useful post

Posted 25-Feb-2014 by Fernando
Chako

How can send a picture and table?

Dear Jim,
I tried to send or add Pictures and Tables inside my message, but I couldn't. Do you have any soln on this issue?
 
Thanks
Chako

Posted 03-Mar-2014 by Chako
Chako

How can send a picture and table?

Dear Jim,
I tried to send or add Pictures and Tables inside my message, but I couldn't. Do you have any soln on this issue?
 
Thanks
Chako

Posted 03-Mar-2014 by Chako
yitoyitoytyo

yitoyitoytyo

Relojero francés BRM ha Relojes Imitacion anunciado la firma de una alianza con el rally de Marruecos clásico. Para la 21ª edición Relojes replicas de esta carrera mítica Bernard Richards y su marca se convertirá en el cronometrador oficial de este hermoso encuentro Replicas Hublot. Un reloj de titanio con los colores del rally, llevado a cabo en una edición.

Posted 18-Apr-2014 by yitoyitoytyo

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: