Formatted Email in SharePoint


Let’s start with simple example where we need to frame a table in the body of an email as depicted below:

STEPS:

  • Go to the desired workflow in SharePoint Designer
  • Insert “Send an Email” Action and move the mouse over the action to find out the small inverted triangle. Click on Properties

Email Properties

  • Paste the below code in String builder(…) of BODY column and hit ok button.

string builder

Example 1:

<HTML>
<HEAD>
<STYLE>
table,th,td
{
border-collapse:collapse;
border:1px solid black;
padding:5px
}
th
{ background:lightblue; }
</STYLE>
</HEAD>
<BODY>
<FONT face=Calibri>Hi Admin, </FONT>
<FONT face=Calibri>An item has been created by with below details: </FONT>
<STRONG><U><FONT face=Calibri>DETAILS:</FONT></U></STRONG>
<TABLE>
<TBODY>
<TR>
<TH><FONT face=Calibri>Name</FONT></TH>
<TD><FONT face=Calibri></FONT></TD>
</TR>
<TR>
<TH><FONT face=Calibri>Designation</FONT></TH>
<TD><FONT face=Calibri></FONT></TD>
</TR>
</TBODY>
</TABLE>
&nbsp;
Thanks and Regards,
SharePoint Connect Team
</BODY>
</HTML>

NOTE: Add the lookup field at corresponding cells in the table..

RESULT:

Example 1.PNG

Example 2:

If we need to bring the entire message with in table, go with the below code:

<HTML>
<HEAD>
<STYLE>
table,td
{
border-collapse:collapse;
border:1px solid #e8eaec ;
}
</STYLE>
</HEAD>
<BODY>
<TABLE style="WIDTH: 100%" cellSpacing=0>
<TBODY>
<TR style="BACKGROUND-COLOR: #f8f8f9">
<TD style="PADDING-BOTTOM: 20px; BACKGROUND-COLOR: #f8f8f9; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; FONT-FAMILY: Verdana; FONT-SIZE: 14pt; PADDING-TOP: 20px">
An Item has been created by <FONT color=#ff0000><STRONG style="FONT-VARIANT: small-caps; COLOR: red"></STRONG></FONT>
</TD>
</TR>
<TR>
<TD>
&nbsp;Dear Admin, &nbsp;&nbsp;
&nbsp;Please find the item details below:&nbsp;
<UL style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 5px">
<LI style="MARGIN-BOTTOM: 1px">ID : <B></B>
<LI style="MARGIN-TOP: 1px; MARGIN-BOTTOM: 1px">Name: <B></B></LI>
</UL>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

RESULT:

Example 2.PNG

If you are expert in HTML and CSS, you can play with the above code as per your need

Advertisements