Last Updated on June 17, 2022 by Rakesh Gupta

Big Idea or Enduring Question:

• How to add a Rich Text Area field to a flow screen?

Objectives:

After reading this blog, you’ll be able to:

• Create a Lightning Web Component for Screen flow
• Add a custom property editor for a screen component
• Add a Lightning Web Component to a flow screen
• Map custom lightning web component value to a Text Area (Rich) field
• and much more

Business Use case

Rachel Gillett is working as a Junior Developer at Gurukul on Cloud (GoC). She has received a requirement from the management that requires him to build a Lightning Web Component for Screen flow that allows reps to enter sales notes in a rich text area and then store the input to a Text Area (Rich) field on the account. 

Why do we need a custom component for Rich Text Area for Screen Flow?

The reason is straightforward. Salesforce Flow doesn’t have an out-of-the-box component for Rich Text Area. That is why we need a lightning web component to enable a Rich Text Area component in the flow screen. 

Customize Action and Screen Component UI in Flow Builder

Develop a custom property editor that provides a simplified UI for an admin when they configure a custom screen component or invocable action in Flow Builder. A custom property editor is a Lightning web component that provides a custom UI for entering input values.

This example creates a custom property editor for a custom flow screen component that displays #visible Lines, Field Label, Field Length, Required, Field Value. The admin sets the value for these components using a slider in the volume component’s custom property editor. When users run the flow, the flow screen shows or uses the admin’s values.

Automation Champion Approach (I-do):

There are a few possible solutions for the above business scenario. We will use Lightning Web Component and Screen Flow to solve the requirement.

Before discussing the solution, let me show you a diagram of a Process Flow at a high level. Please spend a few minutes going through the following Flow diagram and understanding it.

Let’s begin building this automation process.

Guided Practice (We-do):

There are 4 steps to solve Rachel’s business requirement using Lightning Web Component and Screen Flow. We must:

1. Create a custom Text Area (Rich) field on the Account
2. Create a Rich Text Area component for Screen Flow using the lightning web component
3. Salesforce Flow Steps 
   1. Define flow properties for screen flow
   2. Add a screen to display the Account Lookup and Rich Text Area custom component 
   3. Add an update records element to update an account 
4. Add a screen flow to the lightning home page

Step 1: Creating a Custom Text Area (Rich) Field on the Account Object

1. Click Setup.
2. In the Object Manager, type Account.
3. Select Fields & Relationships, then click New.
4. Select Text Area (Rich) as Data Type, then click Next.
5. Enter Field Label and click the tab key, the API Name will populate. 
6. As a best practice, always input a description. 
7. # Visible Lines: 25
8. Length: 32,768
9. Set the Field-level Security for the profiles, make sure to set this field as read-only. 
10. Do not add this field to the Page Layout.
11. Click Save.

Step 2: Create a Rich Text Area Component for Screen Flow using the Lightning Web Component

First of all, create a Rich Text Area Lightning Web Component using the code below. If you don’t know how to create a lightning component then please review this developer guide Create a Lightning Web Component.

screenFlowRichText.html

<template>
            <lightning-input-rich-text value={fieldValue} 
                                       label={fieldLabel} 
                                       label-visible
                                       required={required} 
                                       formats={allowedFormats} 
                                       valid={validity}
                                       class="visibleLines"
                                       onchange={handleChange}             
                                       share-with-entity-id={recordId}
                                       message-when-bad-input={errorMessage}>
            </lightning-input-rich-text>
</template>

screenFlowRichText.js

import { LightningElement, api } from 'lwc';

export default class ScreenFlowRichText extends LightningElement {
    @api fieldValue =" ";
    @api fieldLabel;
    @api required; 
    @api fieldLength;
    @api visibleLines;
    @api recordId;
    @api validity;
    

    allowedFormats = [
        'font',
        'size',
        'bold',
        'italic',
        'underline',
        'strike',
        'list',
        'indent',
        'align',
        'link',
        'image',
        'clean',
        'table',
        'header',
        'color',
        'background',
        'code',
        'code-block',
        'script',
        'blockquote',
        'direction',
    ];

    connectedCallback() {
        this.validity=true;
        document.documentElement.style.setProperty('--rta-visiblelines', (this.visibleLines * 2) + 'em');
    }

    handleChange(event) {
        if((event.target.value).length > this.fieldLength){
            this.validity=false;
            this.errorMessage = "You have exceeded the max length";
        }
       else{
        this.validity = true;
        this.fieldValue = event.target.value;
       }
    }
}

screenFlowRichText.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Rich Text Area</masterLabel>
    <description>Rich Text Area</description>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="fieldLabel" label="Field Label" type="String" required="true" default="Rich Text" description="The label of the rich text editor."/>
            <property name="fieldValue" label="Field Value" type="String" description="The HTML content in the rich text editor."/>
            <property name="required" label="Required" type="Boolean" required="true" default="false" description="Specifies whether users must enter content in the editor. If present, an asterisk is displayed before the label when label-visible is present."/>
            <property name="fieldLength" label="Field Length" type="Integer" required="true" default="32768" description="Up to 131,072 characters on separate lines."/>
            <property name="visibleLines" label="# Visible Lines" type="Integer" required="true" default="5" description="# of Visible Lines is the number of lines you see when you are in edit mode."/>
            <property name="recordId" label="Share with Entity Id" type="String" description="Entity ID to share the image with. Uploaded image files are accessible to all org users by default."/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

screenFlowRichText.css

.visibleLines {
    --sds-c-textarea-sizing-min-height: var(--rta-visiblelines);
}

Copy code from GitHub or Install using this URL. 

Step 3.1: Define Flow Properties

1. Click Setup.
2. In the Quick Find box, type Flows.
3. Select Flows then click on the New Flow.
4. Select the Screen Flow option and click on Create and configure the flow. 
5. It will open the flow designer for you.

Step 3.2: Add a screen to Display the Account Lookup and Rich Text Area Custom Component  

1. On Flow Designer, click on the +icon and select the Screen element.
2. Input the following information:
   1. Enter Label the API Name will auto-populate.
3. Check out the video for step-by-step instructions and some tips

Step 3.3: Add Action – Update Records

The next step is to update the account record to store the Sales Note. We will use the Update Records element. 

1. On Flow Designer, click on the +icon and select the Update Records element.
2. Enter a name in the Label field; the API Name will auto-populate.
3. For How to Find Records to Update and Set Their Values select Specify conditions to identify records, and set fields individually
4. Object: Account
5. Select All Conditions Are Met (AND). 
6. Set Filter Conditions
   1. Row 1:
      1. Field: Id
      2. Operator: Equals
      3. Value: {!Account.recordId}
7. Set Field Values for the Opportunity Records
   1. Row 1:
      1. Field: Sales_Note__c
      2. Value: {!SalesNote.fieldValue}
8. Click Done.

In the end, Rachel’s Flow will look like the following screenshot:

Once everything looks good, perform the steps below:

1. Click Save.
2. Enter Flow Label the API Name will auto-populate.
3. Click Show Advanced.
4. API Version for Running the Flow: 55
5. Interview Label: Rich Text Area {!$Flow.CurrentDateTime}
6. Click Save.

Almost there! Once everything looks good, click the Activate button.

Step 4: Add a Screen Flow to the Lightning Home Page

The next step is to distribute a flow to Lightning Experience or Salesforce app users by embedding it on a Lightning home page.

Proof of Concept

Check out the video for step-by-step instructions. 

Formative Assessment:

I want to hear from you!

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.