Jump to: navigation , search

Visualforce Email Template Sample

In the Winter '09 release you can now take advantage of the new Visualforce Email Templates, which leverages the innovative Visualforce technology to also provide the underlying framework for email templates.

Below I will describe an example of how you can create a new Visualforce email template and pull in related list information into the template.

First I will create the top level element <messaging:emailTemplate> I will set the recipientType which what we also call the WhoID. This is the same a standardController in Visualforce. I will also set the relatedToType which is the whatID from normal email templates, this is a second standardController for the email template.

I can also specify a reply-to address of the email template, so if anyone replies to the email sent using the template, they will reply back to this address.

<messaging:emailTemplate recipientType="Contact"
    relatedToType="Account"
    subject="Case report for Account: {!relatedTo.name}"
    replyTo="support@acme.com" >

Next I am going to define my html content for this email templates, by setting the start htmlbody tag.

<messaging:htmlEmailBody >

I will now define the html content of my email, first I start of by starting the html code and including some stylesheets to format the fonts and tables.

    <html>
        <body>
         <STYLE type="text/css">
               TH {font-size: 11px; font-face: arial;background: #CCCCCC; border-width: 1;  text-align: center } 
               TD  {font-size: 11px; font-face: verdana } 
               TABLE {border: solid #CCCCCC; border-width: 1}
               TR {border: solid #CCCCCC; border-width: 1}
         </STYLE>
             <font face="arial" size="2">

Here I will begin the content of my email, and start adding in merge fields. You might notice below that the merge field notation is {!recipient.name} and not like you are used to contact.name. The reason for this is that you have 2 standard controllers and could pass in a contact id for both the whoID and whatID.

               <p>Dear {!recipient.name},</p>
               <p>Below is a list of cases related to the account: {!relatedTo.name}.</p>
         <table border="0" >
                 <tr > 
                     <th>Action</th><th>Case Number</th><th>Subject</th><th>Creator Email</th><th>Status</th>
                  </tr>

Now to the really interesting part of using Visualforce email templates, how I can leverage related lists in the templates. I am using an apex repeat tag to loop through all the cases associated with the Account I am passing to the email templates. I reference certain fields on the case to output in my template and display to the receiver of the email.

    <apex:repeat var="cx" value="{!relatedTo.Cases}">
       <tr>
           <td><a href="https://na1.salesforce.com/{!cx.id}">View</a> |  
           <a href="https://na1.salesforce.com/{!cx.id}/e">Edit</a></td>
           <td>{!cx.CaseNumber}</td>
           <td>{!cx.Subject}</td>
           <td>{!cx.Contact.email}</td>
           <td>{!cx.Status}</td>
       </tr>
    </apex:repeat>

Finally I need my html content I closing all the tags from above.

       </table>
       <p />
 </font>
        </body>
    </html>

Then I will end the htmlbody tag.

</messaging:htmlEmailBody>

The next step is to include the text version of the email template, for email client who are not able to display html format, yes they still do exists. I start by defining the plainTextEmailBody tag and then I loop through all the cases but without all the html tags.

<messaging:plainTextEmailBody >
Dear {!recipient.name},
 
Below is a list of cases related to Account: {!relatedTo.name}

              [ Case Number ] - [ Subject ] - [ Email ] - [ Status ]

<apex:repeat var="cx" value="{!relatedTo.Cases}">
              [ {!cx.CaseNumber} ] - [ {!cx.Subject} ] - [ {!cx.Contact.email} ] - [ {!cx.Status} ]
</apex:repeat>

 For more detailed information login to http://www.salesforce.com
</messaging:plainTextEmailBody>

and finally I end the email template with the end emailTemplate tag.

</messaging:emailTemplate>

I hope this example helps you kick start your use of the Visualforce email templates and gives you some ideas of how powerful it is and how you can start leveraging the functionality available.

Here is a sample of how this template would look

Technical Library

How to Contribute

RSS Feeds

VisualForceEmailTemplates sample

Visualforce Email Template Sample