Formatted body for the Send Email task in Sharepoint

Post date: Jun 6, 2012 4:51:33 AM

How to create a formatted body for the Send Email task?

A. Overview

The Send Email is a very popular action for SPD workflow developers. Unfortunately, the Editor of the e-mail body doesn't contain any formatting tools. That's a lot of luxury to ask for. But as the need arises, I have written this article to provide the steps for creating formatted e-mail bodies in the Send Email action.

I have taken the idea and some of the content of this article from an Office Online video tutorial with the title Watch this: Design a document review workflow solution.

B. Design the HTML needed in the body

1. Open Microsoft Office SharePoint Designer 2007.

2. Click File > New > HTML, in order to create a new HTML page.

3. A new panel opens. In the bottom left corner of this panel, make sure that the Split View is selected, as shown in the following figure.

IMPORTANT NOTE:

There are two considerations when you use HTML in workflows:

Consideration 1:

Workflow e-mails do not support class-based styles. All the formatting must be done using inline styles.

The following configuration steps should be performed:

- Click the Style Application icon on the bottom bar.

- Make sure that Style Application is set to Manual and the Target Rule is set to New Inline Style.

Consideration 2:

Any white space will affect how the designed HTML will be displayed. Therefore, it is recommended to remove it.

This can be done easily by performing these steps:

- Click Tools > Optimize HTML.

- In the Remove Whitespace section, select HTML all whitespace.

- Click OK. You can see that all the whitespace has been removed from the HTML code in the Code Pane.

To get the formatted text again, you should follow these steps:

- Select the text in the Code Pane and right-click it.

- Click Reformat HTML.

Now let's continue designing our HTML for the e-mail body.

5. Delete the default text in the Code Pane.

6. Copy and Paste the following text as an example in the Code Pane.

<table style="border-collapse: collapse; width: 100%" dir="ltr" cellspacing="0"><tr style="background-color: #f8f8f9; border: thin #e8eaec solid"><td style="font-family: Verdana; font-size: 16pt; background-color: #f8f8f9; border: thin #e8eaec solid; padding: 20px 20px 20px 20px">An announcement has been added by <strong style="color: #008B00; font-variant: small-caps">[*****LOOKUP Created By*****]</strong></td></tr><tr><td> </td></tr><tr style="background-color: #f8f8f9; border: thin #e8eaec solid"><td style="font-family: Verdana; font-size: 14pt; background-color: #f8f8f9; border: thin #e8eaec solid; padding: 10px 40px 10px 40px">Item Details</td></tr><tr><td style="font-family: Calibri; font-size: 12pt; padding: 5px 60px 5px 60px"><ul style="margin-top: 5px; margin-bottom: 5px"><li style="margin-top: 1px; margin-bottom: 1px">Title: [*****LOOKUP TITLE*****]</li><li style="margin-top: 1px; margin-bottom: 1px">Expiration Date: [*****LOOKUP EXPIRATION DATE*****]</li></ul></td></tr></table>

7. Click anywhere in the Design Pane, in order to see how your mail body would look like.

8. Perform the changes you wish.

9. Now remove the whitespace as explained in the previous Note section.

10. Copy your HTML code to a text file and save it, in order to be used later in the workflow.

C. Create the workflow

1. Click File > Open Site.

2. Enter the URL of the site containing an announcement list, on which we shall perform our test.

3. Now click File > New > Workflow.

4. On the Define your new workflow page, enter the following data:

Name: FormattingMails
Attachment List: Announcements
Start Options: Automatically start this workflow when a new item is created

5. Click Next, in order to start designing the workflow steps.

6. Enter Send formatted Mail Body as the Step Name.

7. In the Actions section, select the action Send an Email.

8. Click the this message link.

9. Fill the To and Subject fields with appropriate values.

10. Paste the HTML code which was designed in section B into the Body area.

11. Repalce the fields marked by [*****LOOKUP******] with the correct values using the Lookup wizard.

12. Click OK to close the message builder.

13. Click Finish to save and publish the workflow.

D. Test the solution

1. Browse the site containing the annoucenemnts list to which the workflow was attached.

2. Open the Annoucements list.

3. Create a new entry.

4. Check the body of the sent e-mail notification.