Hello There,

As we know that we can not create a rich text area field in Salesforce Lightning flow. In this blog post, we will see how we can use a Lightning web component to act as a rich text area.

Complete Code

You will get the complete code from Here.

Create a Lightning Web Component

Create a LWC component and name it richTextArea or you can give it any other name as well.

For the .js-meta.xml field use below code

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Rich Text Area</masterLabel>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <!-- Configuring the design attributes -->
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">

            <property name="label" type="String" label="Label to Display" default="Message" 
                        description="The Lable to display"/>
            <property name="placeholder" type="String" label="Enter the Place Holder" 
                        description="Enter the Place Holder to display inside text area rich"/>
            <property name="value" type="String" label="Value to show on text area rich or get from text area rich"
                        description="Value to show on text area rich or get the value from LWC to Flow Builder"/>
            <property name="required" type="Boolean" default="false" label="Required?"
                        description="Indicates if the text area rich field is required or not?"/>
            <property name="requiredMessage" type="String" default="⚠️ Value is required for this field" 
                        label="Message when value missing" 
                        description="The error message to be displayed when the value is missing if the field is required."/>
            
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Code Explanation

To execute the flow action and for flow support we need to import some actions from lightning/flowSupport library

import { FlowAttributeChangeEvent, FlowNavigationNextEvent, FlowNavigationFinishEvent, FlowNavigationBackEvent, FlowNavigationPauseEvent } from 'lightning/flowSupport';

to perform the validation for the field, we need to use a method with @api anonation in salesforce lwc javascript.

@api
    validate() {
        if( this.validateInput() ) { 
            return { 
                isValid: true 
            }; 
        } else { 
            return { 
                isValid: false, 
                errorMessage: this.requiredMessage 
            }; 
        } 
    }

Configure Component in Flow

1. Create a flow or edit the flow where you wanted to use the rich text area field.
2. Drag & Drop the LWC inside the Screen element

Complete Code

You will get the complete code from Here.

Thanks for reading. Happy Learning