Last Updated on May 12, 2023 by Rakesh Gupta
Big Idea or Enduring Question:
- How to make 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:
- First Name
- Last Name
- 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
- Click Setup.
- In the Quick Find box, type Flows.
- Select Flows then click on the New Flow.
- Select the Screen Flow option and click on Create and configure the flow.
- It will open the flow designer for you.
Step 2: Add a Screen Element to Display the fields in Read Only Mode
- On Flow Designer, click on the +icon and select the Screen element.
- Input the following information:
- Click Done.
Step 2.1: Add a Display Text Component to Show the Logged-In User Details
- Under the Input section on Screen Element, drag and drop the Display Text component onto the screen.
- Input the following information:
- Enter a name in the API Name field.
- Type your message in the text box, as shown in the video.
- 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 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 then 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
- Click Setup.
- In the Quick Find box, type Flows.
- Select Flows then click on the New Flow.
- Select the Screen Flow option and click on Create and configure the flow.
- It will open the flow designer for you.
Step 2: Add a Screen Element to Display the fields in Read Only Mode
- On Flow Designer, click on the +icon and select the Screen element.
- Input the following information:
- Click Done.
Step 2.1: Add a Display Text Component to Show the Logged-In User Details
- Under the Input section on Screen Element, drag and drop the Display Text component onto the screen.
- Input the following information:
- Enter a name in the API Name field.
- Type your message in the text box, as shown in the video.
- 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.
Nice article. Thanks for sharing the code.
Thank You!!!
Dear,
I wanted to thank you for your recent blog about different ways to make screen components read-only in Salesforce. As someone who regularly works with Salesforce, I found this post very informative and helpful.
I appreciated the clear and concise explanations and step-by-step instructions for each approach. It was especially helpful to see the screenshots accompanying each step, as it made it easy to follow and understand what was being done.
What I found particularly impressive about your post was the way you presented multiple solutions to the same problem. This shows that you have a deep understanding of the Salesforce platform and a willingness to explore different options to find the best solution.
Overall, I thought this was a great resource and I’m sure it will be helpful to many others looking for ways to make screen components read-only in Salesforce. Thanks for sharing your knowledge and expertise with the community!
Best regards,
Swami Bala
Thank you!