Last Updated on May 30, 2024 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:

1. Make the Date screen component read-only and display today’s date.
2. Make the Text screen component read-only and display the logged-in user’s email.
3. 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 three options:

1. Display Text
2. Make the out-of-the-box screen component read-only and set to disabled states.
3. Use a custom component built over Lightning Web Component.

I recommend using the standard out-of-the-box feature if it meets your business requirements. I have previously written an article discussing options #1 and #3 in detail, Different Ways to Make Screen Component Read Only. In this article, I am going to focus on #2, which is a new enhancement coming to our organization this summer.

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. Today – Populate Today’s Date
2. Email – Put Logged-In User’s Email
3. Note: Reach out to the Support Team if any changes are needed on this form.

Automation Champion Approach (I-do):

We will use the out-of-the-box screen flow component to address the above business requirement.

With read-only states, you can display text to provide summary information. With conditionally disabled states, you can protect users from making errors by disabling fields, allowing you to enforce business logic on the form.

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 Start From Scratch option and click on Next.
5. Select the Screen Flow option and click on Create and configure the flow.

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 Date Component to the Today’s Date in Disabled State

1. Under the Input section on Screen Element, drag and drop the Date component onto the screen. 
2. Input the following information:
   1. Enter Label the API Name will auto-populate.
   2. Disabled: {!$GlobalConstant.True}
   3. Default Value: {!$Flow.CurrentDate}
3. Click Done.

Step 2.2: Add a Text Component to Show the Logged-In User Email in Disabled State

1. Under the Input section on Screen Element, drag and drop the Text component onto the screen. 
2. Input the following information:
   1. Enter Label the API Name will auto-populate.
   2. Disabled: {!$GlobalConstant.True}
   3. Default Value: {!$User.Email}
3. Click Done.

Step 2.3: Add a Long Text Text Component to Show the General Note in Read Only Mode

1. Under the Input section on Screen Element, drag and drop the Long Text Area component onto the screen. 
2. Input the following information:
   1. Enter Label the API Name will auto-populate.
   2. Read only: {!$GlobalConstant.True}
   3. Default Value: Reach out to the Support Team if any changes are needed on this form
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.

Things to Remember

1. Read Only and Disabled states have been supported by the following standard components.
   1. Text
   2. Long Text Area
   3. Date
   4. Date Time
   5. Number
   6. Currency
   7. Password
   8. Address

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.