Last Updated on August 9, 2023 by Rakesh Gupta

Big Idea or Enduring Question:

• How to make the screen component read-only?

Objectives:

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

• Add read-only text to screen component using Display Text
• Add read-only text to screen component using a custom Lightning Web Component
• Configure custom lightning web component for screen flow
• And much more

What is Read Only Component?

Read-only states are applied to components when the user can review but not modify the value. Salesforce Flow has a native feature to display texts in read-only format, but sometimes it is not enough for UI/UX design.

Now you can see the difference between the two options. I recommend using standard out-of-the-box feature if it fulfills your business requirement.

Business Use case

Warren Mason is a System Administrator at Gurukul on Cloud (GoC). At GoC they are using Salesforce Flow to streamline Sales Processes. Warren has a requirement to display the following logged-In users fields on a screen flow in the read-only mode:

1. First Name
2. Last Name
3. Email
4. Mobile

Automation Champion Approach (I-do): Option 1 – Display Text

We will use a Display Text element to solve the above business requirement.

Step 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 2: Add a Screen Element to Display the fields in Read Only Mode

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. Click Done. 

Step 2.1: Add a Display Text Component to Show the Logged-In User Details

1. Under the Input section on Screen Element, drag and drop the Display Text component onto the screen. 
2. Input the following information:
   1. Enter a name in the API Name field.
   2. Type your message in the text box, as shown in the video.
3. Click Done.

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

Once everything looks good, Save the Flow. 

Proof of Concept

Now onwards, when a business user runs, the screen flow will automatically display the logged-in user information in read-only format.

Automation Champion Approach (I-do): Option 2 – Custom Flow Screen Component (Lightning Web Component)

We will create a custom flow screen component using the lightning web component to solve the above business requirement.

Step 1: Create a Custom Screen Flow Component Using the Lightning Web Component

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

screenFlowReadOnlyComponent.html

<template>
    <template lwc:if={isCheckboxField}>
        <lightning-input type={fieldType} label={fieldLabel} checked={fieldValue} disabled="true" field-level-help={fieldLevelHelp}></lightning-input>
    </template>
    <template lwc:elseif={isPhoneField}>
        <lightning-input type={fieldType} label={fieldLabel} value={fieldValue} disabled="true" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" field-level-help={fieldLevelHelp}></lightning-input>
    </template>
    <template lwc:else>
        <lightning-input type={fieldType} label={fieldLabel} value={fieldValue} disabled="true" field-level-help={fieldLevelHelp}></lightning-input>
    </template>
</template>

screenFlowReadOnlyComponent.js

import { LightningElement, wire, api, track } from 'lwc';

export default class ScreenFlowReadOnlyField extends LightningElement {
    @api fieldLabel;
    @api fieldValue;
    @api fieldType;
    @api fieldLevelHelp;

   isCheckboxField = false;
   isPhoneField = false;

   connectedCallback() {

    if (this.fieldType != null && (this.fieldType=='toggle' ||  this.fieldType=='checkbox' )) {
        this.isCheckboxField = true;
    }
    else if (this.fieldType != null && this.fieldType=='tel'){
        this.isPhoneField = true;
    }
}
}

screenFlowReadOnlyComponent.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Read Only Component</masterLabel>
    <description>Read Only Component</description>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="fieldLabel" label="Field Label" type="String" required="true" description="The label that appears above the field."/>
            <property name="fieldValue" label="Field Value" type="String" required="true" description="To provide a value set this attribute value."/>
            <property name="fieldType" label="Field DataType" type="String" required="true" description="Valid input types are checkbox, date, datetime, time, email, password, tel, url, number, text (default), toggle."/>
            <property name="fieldLevelHelp" label="Field Level help" type="String" description="Help Text"/>
        </targetConfig>
 </targetConfigs>
</LightningComponentBundle>

Copy code from GitHub or Install using this URL. 

Step 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 2: Add a Screen Element to Display the fields in Read Only Mode

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. Click Done. 

Step 2.1: Add a Display Text Component to Show the Logged-In User Details

1. Under the Input section on Screen Element, drag and drop the Display Text component onto the screen. 
2. Input the following information:
   1. Enter a name in the API Name field.
   2. Type your message in the text box, as shown in the video.
3. Click Done.

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

Once everything looks good, Save the Flow.

Proof of Concept

Now onwards, when a business user runs the screen flow will automatically display the logged-in user information in read-only format.

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.