+ Start a Discussion
Simon WhightSimon Whight 

When sending test Visualforce email - formatting is being lost

I have a large VF email. As part of it I have put in some different fonts, also the table has some visibility rules.

When sending the test, it is ignoring the font I have chosen, when forwarding the email on the visibility rules seem to be completely ignored.

Here is the code, apologies for the length. As you can see, just clumps of tables. The Apex Repeat ones have visibility rules in there, the body is meant to make everything send in Calibri. As it stands, it comes through as Times New Roman, plus reply/forward causes a whole host of stuff to be displayed - essentially everything in the Apex Repeat I have asked to be invisible.

Can I get around this? Have I coded this poorly? I needed to do something quickly and without Apex Controllers/VF Components, as such, the solution has to be the same too - I don't have the skills to do that.

Thanks!
 
<messaging:emailTemplate recipientType="User"
  relatedToType="Account"
  subject="Onboarding Email: {!relatedTo.name}"
  replyTo="simonwhight@citation.co.uk">
  <messaging:htmlEmailBody >
    <html>
      <body>
        <STYLE type="text/css">
          CAPTION {font-size: 24px; font-face: CALIBRI }
          TH {font-size: 14px; font-face: CALIBRI; color: #FFFFFF ; font-weight: bold; background: #86878C;
               border-width: 1;  text-align: center }
          TD  {font-size: 12px; font-face: CALIBRI }
          TABLE {border: solid #CCCCCC; border-width: 1}
          TR {border: solid #CCCCCC; border-width: 1}
          P {margin: 0em;}
        </STYLE>
        <font face="CALIBRI" size="2">

<!--Table 1 **************************************************************************************-->
         
   
         <table border="1" width="1200px" >
           <col width="400"/>
           <col width="400"/>
           <col width="400"/>           
           <caption>Client onboarding email for: {!relatedTo.Name}</caption>
          <tr>
           <th>Business Type</th>
           <th>Renewal Type</th>
           <th>Affinity</th>
          </tr>
          <tr>
           <td width="400"/>
           <td width="400"/>
           <td width="400"/>          
          </tr>  
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">
            <td align="center">{!ctrtx.Business_Type__c}</td>
            <td align="center">{!ctrtx.Renewal_Type__c}</td>
            <td align="center">{!ctrtx.Affinity__c}</td>
           </tr>
           </apex:repeat> 
        </table>  

        
<!--Table 2 **************************************************************************************-->  
        
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>      
           <tr>
            <th>Account Name</th>
            <th>Trading As Name</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>              
          <tr>      
            <td align="center">{!relatedTo.name}</td>
            <td align="center">{!relatedTo.Trading_As_Name__c}</td>
          </tr>
        </table>           
          
<!--Table 3 **************************************************************************************-->  
        
         <table border="1" width="1200px" >
           <col width="1200"/>  
           <tr>
            <th>Address</th>
          </tr>
          <tr>
           <td width="1200"/>
          </tr>  
          <tr>      
            <td align="center">{!relatedTo.BillingStreet}</td>
          </tr>
          <tr>      
            <td align="center">{!relatedTo.BillingCity}</td>
          </tr>
          <tr>      
            <td align="center">{!relatedTo.BillingState}</td>
          </tr>
          <tr>      
            <td align="center">{!relatedTo.BillingPostalCode}</td>
          </tr>
        </table>           

<!--Table 4 **************************************************************************************-->  
        
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>      
           <tr>
            <th>Telephone Number</th>
            <th>Website</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>  
          <tr>      
            <td align="center">{!relatedTo.phone}</td>
            <td align="center">{!relatedTo.website}</td>
          </tr>
        </table> 
        
<!--Table 5 **************************************************************************************-->  
        
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>      
           <tr>
            <th>Industry</th>
            <th>Sector</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>  
          <tr>      
            <td align="center">{!relatedTo.Industry}</td>
            <td align="center">{!relatedTo.Sector__c}</td>
          </tr>
        </table>         
      
<!--Table 6 **************************************************************************************-->  
        
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>      
           <tr>
            <th>Total Number Of Employees</th>
            <th>Total Number Of Sites</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>  
          <tr>      
            <td align="center">{!FLOOR(relatedTo.Total_Employees__c)}</td>
            <td align="center">{!FLOOR(relatedTo.Sites__c)}</td>
          </tr>
        </table>
        
<!--Table 7 **************************************************************************************-->  
        
         <table border="1" width="1200px" >
           <col width="400"/>
           <col width="400"/>
           <col width="400"/>        
           <tr>
            <th>FT Employees</th>
            <th>PT Employees</th>
            <th>Subcontractors</th>
          </tr>
          <tr>
           <td width="400"/>
           <td width="400"/>
           <td width="400"/>
          </tr>              
          <tr>      
            <td align="center">{!FLOOR(relatedTo.FT_Employees__c)}</td>
            <td align="center">{!FLOOR(relatedTo.PT_Employees__c)}</td>
            <td align="center">{!FLOOR(relatedTo.Subcontractors__c)}</td>
          </tr>
        </table>                 
      
<!--Table 8 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="1200"/>
           <caption>Deal Overview</caption>
           <tr>
            <th>Contract Term (months)</th>
          </tr>
          <tr>
           <td width="1200"/>
          </tr>
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">         
           <td align="center">{!ctrtx.ContractTerm}</td>
           </tr>
          </apex:repeat> 
        </table>
        
<!--Table 9 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>
           <tr>
            <th>BDM</th>
            <th>Date Signed</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>  
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">         
            <td align="center">{!ctrtx.CompanySigned.Name}</td>
            <td align="center">  <apex:outputText value="{0,date,dd/MM/yyyy}">
                  <apex:param value="{!ctrtx.CompanySignedDate}" /> 
                  </apex:outputText>  </td>
          </tr>
          </apex:repeat> 
        </table>                     
      
<!--Table 10 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>
           <tr>
            <th>Customer Signed By</th>
            <th>Position</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>  
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">         
            <td align="center">{!ctrtx.CustomerSigned.Name}</td>
            <td align="center">{!ctrtx.CustomerSignedTitle}</td>
          </tr>
            </apex:repeat> 
        </table>         
      
<!--Table 11 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>
           <tr>
            <th>Contract Start Date</th>
            <th>Contract End Date</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>  
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">       
            <td align="center">  <apex:outputText value="{0,date,dd/MM/yyyy}">
                  <apex:param value="{!ctrtx.StartDate}" /> 
                  </apex:outputText>  </td>
            <td align="center">  <apex:outputText value="{0,date,dd/MM/yyyy}">
                  <apex:param value="{!ctrtx.EndDate}" /> 
                  </apex:outputText>  </td>
          </tr>
            </apex:repeat> 
        </table> 
        
<!--Table 12 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>
           <caption>Services Purchased</caption>           
           <tr>
            <th>EL&amp;HR</th>
            <th>H&amp;S</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>  
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">         
            <td align="center">{!IF(ctrtx.Services_Taken_EL__c=TRUE,"Yes","No")}</td>            
            <td align="center">{!IF(ctrtx.Services_Taken_HS__c=TRUE,"Yes","No")}</td>
          </tr>
            </apex:repeat> 
        </table>                 
      
<!--Table 13 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>       
           <tr>
            <th>A&amp;I only EL&amp;HR</th>
            <th>A&amp;I only H&amp;S</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>  
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">        
            <td align="center">{!IF(ctrtx.Services_Taken_AI_Only__c=TRUE,"Yes","No")}</td>            
            <td align="center">{!IF(ctrtx.Services_Taken_AI_Only_HS__c=TRUE,"Yes","No")}</td>
          </tr>
            </apex:repeat> 
        </table>       

<!--Table 14 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>       
           <tr>
            <th>Advice Only EL&amp;HR</th>
            <th>Advice Only H&amp;S</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>  
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">         
            <td align="center">{!IF(ctrtx.Services_Taken_Advice_Only__c=TRUE,"Yes","No")}</td>            
            <td align="center">{!IF(ctrtx.Services_Taken_Advice_Only_HS__c=TRUE,"Yes","No")}</td>
          </tr>
            </apex:repeat>           
        </table>      
      
<!--Table 15 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="1200"/>       
           <tr>
            <th>Small Business Package</th>
          </tr>
          <tr>
           <td width="1200"/>
          </tr>
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">       
            <td align="center">{!IF(ctrtx.Services_Taken_SBP__c=TRUE,"Yes","No")}</td>            
          </tr>
            </apex:repeat> 
        </table> 
        
<!--Table 16 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/> 
           <caption>Other Service</caption>        
           <tr>
            <th>JIT Tribunal</th>
            <th>Fire Risk Assessments</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>            
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">     
            <td align="center">{!IF(ctrtx.Services_Taken_JIT__c=TRUE,"Yes","No")}</td>            
            <td align="center">{!IF(ctrtx.Services_Taken_FRA__c=TRUE,"Yes","No")}</td>
          </tr>
            </apex:repeat> 
        </table> 

<!--Table 17 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="1200"/>      
           <tr>
            <th>Training</th>
          </tr>
          <tr>
           <td width="1200"/>
          </tr>
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">       
            <td align="center">{!IF(ctrtx.Services_Taken_Training__c=TRUE,"Yes","No")}</td>            
          </tr>
            </apex:repeat> 
        </table> 
        
<!--Table 18 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="1200"/>      
           <tr>
            <th>Consultancy</th>
          </tr>
          <tr>
           <td width="1200"/>
          </tr>
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">       
            <td align="center">{!IF(ctrtx.Services_Taken_Consultancy__c=TRUE,"Yes","No")}</td>            
          </tr>
            </apex:repeat> 
        </table>         
      
<!--Table 19 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>       
           <tr>
            <th></th>
            <th>Business Defence</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>            
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">         
            <td align="center"></td>            
            <td align="center">{!IF(ctrtx.Business_Defence__c=TRUE,"Yes","No")}</td>
          </tr>
            </apex:repeat> 
        </table> 
      
<!--Table 20 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>       
           <tr>
            <th></th>
            <th>Environmental</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>  
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">         
            <td align="center"></td>            
            <td align="center">{!IF(ctrtx.Services_Taken_Env__c=TRUE,"Yes","No")}</td>
          </tr>
            </apex:repeat> 
        </table> 

<!--Table 21 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="600"/>
           <col width="600"/>       
           <tr>
            <th></th>
            <th>eRAMS</th>
          </tr>
          <tr>
           <td width="600"/>
           <td width="600"/>
          </tr>  
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">       
            <td align="center"></td>            
            <td align="center">{!IF(ctrtx.Services_Taken_eRAMS__c=TRUE,"Yes","No")}</td>
          </tr>
            </apex:repeat> 
        </table> 
        
<!--Table 22 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="1200"/>
           <caption>Terms &amp; Sales Notes</caption>        
           <tr>
            <th>Finance Notes</th>
          </tr>
          <tr>
           <td width="1200"/>
          </tr>
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">        
            <td align="center">{!ctrtx.Finance_Notes__c}</td>            
          </tr>
            </apex:repeat> 
        </table> 

<!--Table 23 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="1200"/>     
           <tr>
            <th>Special Terms</th>
          </tr>
          <tr>
           <td width="1200"/>
          </tr>
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">         
            <td align="center">{!ctrtx.SpecialTerms}</td>            
          </tr>
            </apex:repeat> 
        </table> 
        
<!--Table 24 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="1200"/>     
           <tr>
            <th>EL&amp;HR Notes</th>
          </tr>
          <tr>
           <td width="1200"/>
          </tr>
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">      
            <td align="center">{!ctrtx.PEL_Notes__c}</td>            
          </tr>
            </apex:repeat> 
        </table>    
        
<!--Table 25 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="1200"/>     
           <tr>
            <th>H&amp;S Notes</th>
          </tr>
          <tr>
           <td width="1200"/>
          </tr>
          <apex:repeat var="ctrtx" value="{!relatedTo.Contracts}">                    
          <tr style="display:{!IF(ctrtx.LatestContract__c=false, 'None', '')}">       
            <td align="center">{!ctrtx.H_S_Notes__c}</td>            
          </tr>
            </apex:repeat> 
        </table>  
        
<!--Table 26 **************************************************************************************-->
         
          <table border="1" width="1200px" >
           <col width="65"/>
           <col width="240"/>
           <col width="240"/>           
           <col width="240"/>
           <col width="220"/>
           <col width="65"/>           
           <col width="65"/>   
           <col width="65"/>  
           <caption>Contacts and Users</caption>
           <tr>
            <th>Salutation</th>
            <th>Name</th>
            <th>Job Title</th>
            <th>Email Address</th>
            <th>Telephone No</th>
            <th>Super?</th>
            <th>EL&amp;HR?</th>
            <th>H&amp;S?</th>
          </tr>
          <tr>
           <td width="65"/>
           <td width="240"/>
           <td width="240"/>           
           <td width="240"/>
           <td width="220"/>
           <td width="65"/>           
           <td width="65"/>   
           <td width="65"/> 
          </tr>
        <apex:repeat var="conx" value="{!relatedTo.Contacts}">  
          <tr>
            <td align="center">{!conx.Salutation}</td>
            <td align="center">{!conx.Name}</td>
            <td align="center">{!conx.Title}</td>
            <td align="center">{!conx.email}</td>
            <td align="center">{!conx.phone}</td>
            <td align="center">{!conx.Online_Super_User__c}</td>
            <td align="center">{!conx.Helpline_PEL__c}</td>
            <td align="center">{!conx.Helpline_H_S__c}</td>
          </tr>
        </apex:repeat> 
        </table>               
      
<!--Table 27 **************************************************************************************-->
         
         <table border="1" width="1200px" >
           <col width="200"/>
           <col width="200"/>
           <col width="200"/>  
           <col width="200"/>
           <col width="200"/>
           <col width="200"/>
           <caption>Sites</caption>
           <tr>
            <th>Street</th>
            <th>City</th>
            <th>County</th>
            <th>Postcode</th>
            <th>Telephone No</th>
            <th>Site Type</th>
          </tr>
          <tr>
           <td width="200"/>
           <td width="200"/>
           <td width="200"/>  
           <td width="200"/>
           <td width="200"/>
           <td width="200"/>
          </tr>
        <apex:repeat var="sitex" value="{!relatedTo.Sites__r}">  
          <tr>
            <td align="center">{!sitex.Street__c}</td>
            <td align="center">{!sitex.City__c}</td>
            <td align="center">{!sitex.County__c}</td>
            <td align="center">{!sitex.Postcode__c}</td>
            <td align="center">{!sitex.Phone__c}</td>
            <td align="center">{!sitex.Site_Type__c}</td>
          </tr>
        </apex:repeat> 
        </table> 
      
        </font>
      </body>
    </html>
  </messaging:htmlEmailBody>
 </messaging:emailTemplate>

 
Iqrar AhmedIqrar Ahmed

Hi simon,

Try to put block instead of empty string linke 
display:{!IF(ctrtx.LatestContract__c=false, 'None', 'Block')}

Regards
IQRAR AHMED
 

Simon WhightSimon Whight
Block seems to lose all the cell/column formatting.

It is the None that is the issue. When you receive the email, everything is formatted fine, when you click reply/forward, it doesn't appear to be doing anything.

Shows like this in the source:
 
<span style='display:none'>

Where the received email looks like this:
 
<tr style="display:None">

I've fixed the formatting thing by making my terrible CSS better.
Simon WhightSimon Whight
One incredibly low tech solution: email should be forwarded as attachment. That retains the formatting.

Here is my less terrible CSS for reference. I have stripped out all formatting from the tables in my code and it is driven from this properly now.
 
<style type="text/css">
      CAPTION {font-size: 24px; 
               font-family: CALIBRI;
               background: #FFFFFF;}

          TH    {font-size: 16px; 
                 font-family: CALIBRI; 
                 color: #FFFFFF; 
                 font-weight: bold;
                 word-wrap:normal; 
                 background: #86878C;
                 text-align: center;}
                 
          TD    {font-size: 12px; 
                 font-family: CALIBRI; 
                 word-wrap:normal;
                 text-align:center;}
                 
          TABLE {border: solid #CCCCCC; 
                 table-layout:fixed;
                 border-width:0;
                 width:1200px;}
                 
          TR    {border: solid #CCCCCC;}
                 
          P     {margin: 0em;}
          
          table#distinct td {font-size: 24px; 
                             font-family: CALIBRI;
                             table-layout:fixed;
                             border-width:0;
                             width:1200px;
                             text-align: center;}
       </style>