VisualForce page to allow inline editing of EmailTemplate HTML

Question

Thanks for taking a look at my problem.

I am building a VisualForce page to email all CampaignMembers associated with a Campaign record. Everything is working except for one little thing:

I have an tag that is rendered when the user clicks "Edit Template". The idea is that the user can preview the email that is going to be sent, which I do by displaying the EmailTemplate.HtmlValue with .

Here's my relevant code:

<!--VisualForce Page -->
<apex:pageBlockSectionItem rendered="{!editMode}">
    <apex:outputLabel value="Edit Template" />
    <apex:inputTextarea id="editTemplate" value="{!strMessage}" richText="true" cols="100" rows="15"/>
</apex:pageBlockSectionItem>

/* Controller */
editedTemplate.HtmlValue = strMessage;
update editedTemplate;

So the problem I am getting, when using the rich-text editor, is the following exception:

FIELD_INTEGRITY_EXCEPTION, The HTML Email Content contains improperly formatted merge fields. Please check the format of all the merge fields to ensure they start with {! and end with }.: [HtmlValue]

Although I can get it to work with the plain-text editor. However, it is displayed like this:

<table height="400" width="550" cellpadding="5" border="0" cellspacing="5" >
<tr height="400" valign="top" >
<td style=" color:#000000; font-size:12pt; background-color:#FFFFFF; font-family:arial; bLabel:main; bEditID:r3st1;" tEditID="c1r1" locked="0" aEditID="c1r1" >
<![CDATA[<font face="arial"><font size="3">Dear&nbsp;</font>{!Contact.Salutation}&nbsp;{!Contact.LastName},</font><div style="color: rgb(0, 0, 0); font-family: arial; font-size: 12pt;"><br></div><div style="color: rgb(0, 0, 0); font-family: arial; font-size: 12pt;">How are you today? I enjoyed our meeting, let's meet again soon!</div><div style="color: rgb(0, 0, 0); font-family: arial; font-size: 12pt;"><br></div><div style="color: rgb(0, 0, 0); font-family: arial; font-size: 12pt;">Sincerely,</div><div style="color: rgb(0, 0, 0); font-family: arial; font-size: 12pt;"><br></div><div style="color: rgb(0, 0, 0); font-family: arial; font-size: 12pt;"><font face="arial"><b>{!User.Name}</b></font></div><div style="color: rgb(0, 0, 0); font-family: arial; font-size: 12pt;"><font face="arial">{!User.CompanyName}</font></div><div style="color: rgb(0, 0, 0); font-family: arial; font-size: 12pt;"><font face="arial">{!User.Phone}</font></div><div><font face="arial">{!User.Email}</font></div><div style="color: rgb(0, 0, 0); font-family: arial; font-size: 12pt;"><font face="arial"><br></font></div>]]></td>
</tr>
</table>

Unformatted HTML is not appropriate for displaying to the end-user.

Any ideas why the rich-text editor would cause the exception above? What can I do to fix it?

Answer 1

I tried to complete your code to achieve what you describe and found a little problem: sending the email will create a Task object, which conflicts with saving an EmailTemplate (you get a MIXED_DML_OPERATION).

What I ended up doing is creating separate buttons for the save and the email. I used a TemporalTemplate to store the modified version so I can reuse it.

You may be able to avoid the MIXED_DML_OPERATION by using a @Future method to send the email after the save.

Here's my code:

<apex:page controller="EmailTemplateController">
<apex:form >
<apex:pageBlock >
<apex:pageBlockButtons >
<apex:commandButton action="{!sendMail}" value="Send Email"/>
<apex:commandButton action="{!saveTemplate}" value="Save Template"/>
</apex:pageBlockButtons>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
    <apex:outputLabel value="Target Contact" />
    <apex:inputField value="{!targetContact.ReportsToId}"/>    
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
    <apex:outputLabel value="Edit Template" />
    <apex:inputTextarea id="editTemplate" value="{!editedTemplate}" richText="true" cols="100" rows="15"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

And the controller:

public with sharing class EmailTemplateController {
    public Contact targetContact {get;set;}
    public String editedTemplate {get;set;}
    private String templateId = null;
    public EmailTemplateController() {
        targetContact = new Contact();
        if (ApexPages.currentPage().getParameters().containsKey('template')) {
            templateId = ApexPages.currentPage().getParameters().get('template');
            this.editedTemplate = [select HtmlValue from EmailTemplate where Id = :templateId].HtmlValue;
        }
    }

    public PageReference saveTemplate() {
        EmailTemplate template =  [select Id, HtmlValue from EmailTemplate where Name = 'TemporalTemplate'];
        template.HtmlValue = editedTemplate;
        update template;

        return null;
    }

    public PageReference sendMail() {
        EmailTemplate template =  [select Id, HtmlValue from EmailTemplate where Name = 'TemporalTemplate'];

        Messaging.SingleEmailMessage email = new Messaging.SingleEmailMessage();
        email.setSenderDisplayName('Tester');
        email.setTemplateId(template.Id);
        email.setTargetObjectId(targetContact.ReportsToId);
        Messaging.sendEmail(new Messaging.SingleEmailMessage[] {email});
        return null;
    }
}

Answer 2

I have been tinkering around with email templates alot lately and had a similar problem that might explain why this is failing, and will probably not work. I tried to store a rendered email in a custom field in salesforce, and since I had HTML I thought, why not store it in a richtext field, that way I should be able to see the rendered html instead of the code.

But what I found was that the richtext editor strips quite some mark-up form your templates when trying to load the html in there, I think the default rich text editor you get in salesforce (and probably 3rd pary components aswel) aren't suited for email template editing. As email templates normally have a different mark-up than websites, and most editors (if not all) are used for trying to provide a WYSIWYG experience for editing websites (and still the html that is generated from those, is mostly utter garbage), I think it'll be hard to find an editor that will work for you. Next to that, bad formatted or ugly html will result in a lower deliverability as spam filters pick that up.

If you look at mass emailing solutions in the likes of MailChimp, VerticalResponse, iContact, ... none seem to provide a real WYSIWYG experience. I'm sure if you would find a solution for this there would be many interested parties. (Me included ;) make sure to contact me!)

I'm afraid you're stuck with using the salesforce template editor, or the salesforce "send an email" feature. And hope that salesforce is busy with some killer feature (as always: Safe Harbor)