Screen Flow – Preview the email body with merge fields populated before sending out

When using screen flow to send emails, it is often necessary to preview the email before sending it to your customer. This allows you to ensure that all the details are correct before the email goes out. However, there is no standard way to preview the email with all the merge fields populated. This article guides you through previewing the email before sending it, utilizing an Apex invocable method and a Lightning Web Component (LWC) to display the HTML/Visualforce template content.

First, create an Apex invocable action that takes three inputs and returns two values.

INPUT PARAMETERS
- Email Template Id
  - required – A Salesforce Email template ID usually starts with 00X
- Related Record Id
  - optional – The Salesforce record ID of the related record such as opportunity, Case, or custom object which is used in merge fields processing.
- Recipient Id
  - optional – The Salesforce record ID of the contact, lead, or user object that is used in merge field processing.
OUTPUT PARAMETERS
- Email Subject
  - The subject of the email with the merge field populated
- Email Body
  - The HTML or plain text email body with all the merge fields populated.
- Is Rich Text?
  - A boolean value indicates whether the email body is HTML or plain text. For the HTML body, this value is checked.

Copy Code

public class PreviewEmailTemplate {
    
    public class Requests {
        @InvocableVariable(label='Email Template Id' description='An Id of the email template that exists in the Salesforce database.' required=true)
        public string emailTemplateId;
        
        @InvocableVariable(label='Related Record Id' description='The Id of the related record which is used in merge field processing.')
        public string whatId;

        @InvocableVariable(label='Recipient Id' description='The Id of a contact, lead, or user. The record is used in merge field processing.')
        public string whoId;
    }
    
    public class Response {
        @InvocableVariable(label='Email Subject' description='The subject of the email.')
        public string emailSubject;
        
        @InvocableVariable(label='Email Body' description='The HTML/test email body.')
        public string emailBody;

        @InvocableVariable(label='Has HTML Body?' description='This is true, if the email has HTML body.')
        public boolean HasRichText;
    }

    @InvocableMethod(label='Preview Stored Email Template' description='This method takes email template Id and related record Id, the returns the email subject and body with merged field values.' iconName='slds:standard:email')
    public static list<Response> execute (List<Requests> requestList) {
        system.debug('requestList::'+requestList);

        list<Response> result = new list<Response>();

        for(Requests req :requestList){

            Messaging.SingleEmailMessage renderResult = Messaging.renderStoredEmailTemplate(
                req.emailTemplateId,
                req.whoId,
                req.whatId
            );
            system.debug(renderResult.getPlainTextBody());
            system.debug(renderResult.getHtmlBody());
            Response resp = new Response();
            resp.emailBody = renderResult.getHtmlBody() == NULL ? renderResult.getPlainTextBody() : renderResult.getHtmlBody();
            resp.emailSubject = renderResult.getSubject();
            resp.HasRichText = renderResult.getHtmlBody() != NULL;
            result.add(resp);
        }
        
        return result;
    }
}

Now create or update the screen flow and add the “Preview Stored Email Template” invocable action where pass the parameters (mentioned above) and in response, it will return the Email Body with merge fields populated and a boolean value that identifies whether the email body has rich text or not. As shown in the attached screenshot.

On the next screen, you can view the email body using the Display Text flow component. The Display Text component shows the text email template body fine, however, it has some formatting issues while showing HTML value. So you can create the following lightning web component that takes rich text/HTML body as input and shows it as formatted value.

Name: showRichText.html

Copy Code

<template>
    <lightning-formatted-rich-text value={richTextValue}></lightning-formatted-rich-text>
</template>

showRichText.js

Copy Code

import { LightningElement, api } from 'lwc';

export default class ShowRichText extends LightningElement {
    @api richTextValue;
}

showRichText.js-meta.xml

Copy Code

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Show Rich Text Content</masterLabel>
    <targets>
        <target>lightning__FlowScreen</target>
        <target>lightning__RecordPage</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="richTextValue" label="Rich Text Content" type="String" role="inputOnly"/>
        </targetConfig>

        <targetConfig targets="lightning__RecordPage">
            <property name="richTextValue" label="Rich Text Content" type="String"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Now for the plain text use the Display Text component with a component visibility condition to display the component when {!is_rich_text} Equals {!$GlobalConstant.False}. If the email body is HTML, then use the above LWC to show the email body with component visibility as {!is_rich_text} Equals {!$GlobalConstant.True}

Wath the following video, that explains the flow for previewing email using screen flow.

Article Views: 509