top of page
Writer's pictureJessica Mills

HTML Email Tables in Salesforce: Free Resource Highlight

Free Resource Time: Have you ever wanted or needed to send an email with an HTML table that displays a row for each record in Salesforce? It’s easier than you might think! Here are a few free resource guides along with some tips and tricks:


First, I want to give a shout-out to SalesforceTime which is where I learned how to make this specific flow. Please read this article by Yumi Ibrahumzade on SalesforceTime before viewing the tips and tricks below: How to Send Email With a Record Table in Flow
Second, here is a pre-built component by UnofficialSF: Generate Collection Report

Let's Talk Tables

You might not be sending weekly positive affirmations to your customers, but who says you can't start? Here are a few HTML formatting tips and tricks for your table. If you have no idea what this is referring to, please read this article by Yumi Ibrahimzade on SalesforceTime!


Tips & Tricks

  • Make sure “Plain Text” is selected in your text template

  • W3 Schools is a great resource for learning HTML

  • Ensure the tableRows variable is a single text variable (not a collection)


HTML Formatting Examples


allCellsStyle

"text-align: left; padding: 5px;"

emailTemplate

<p> Hey Jessica, <br> This is a reminder that <em> you are enough!</em> Here is a recap of your positive affirmations this week: </p><p>{!table}

tableRow

<tr style = "{!isEvenRowStyle}" >
<td style = {!allCellsStyle} ><a href="{!orgURL}{!Loop_Positive_Affirmations.Id}"> {!Loop_Positive_Affirmations.Date__c}</a> </td> 
<td> {!Loop_Positive_Affirmations.Postive_Affirmation__c} </td>
</tr>

table

<table style= "border-collapse: collapse; width: 100%; border: 1px solid white">
{!tableHeader}
{!varTableRows}
</table>

tableHeader

<tr style= "background-color: #556b2f; color: white; text-align: left; width: 100%; padding-top: 5px; padding-bottom: 5px">
<th style ="padding-left: 8px; padding-top: 5px; padding-bottom: 5px;" >Date</th>
<th style ="padding-left: 2px; padding-top: 5px; padding-bottom: 5px;" >Positive Affirmation</th>
</tr>

isEvenRowStyle

IF({!IsEvenRow}, "background-color: #f2f2f2;", "")

Thanks for reading! If you are interested in additional free resources, bes sure to check out the Helpful Salesforce Tools page.

7 views

Recent Posts

See All

Comentarios


bottom of page