Completely different Methods to Make Display Part Learn Solely

Final Up to date on April 9, 2023 by Rakesh Gupta

Large Concept or Enduring Query:

• Easy methods to make display part learn solely?

Goals:

After studying this weblog, you’ll have the ability to:

• Add read-only textual content to display part utilizing Show Textual content
• Add read-only textual content to display part utilizing a customized Lightning Net Part
• Configure customized lightning net part for display stream
• And far more

What’s Learn Solely Part?

Learn-only states are utilized to parts when the consumer can evaluation however not modify the worth. Salesforce Circulation has a local function to show texts in read-only format, however typically it’s not sufficient for UI/UX design.

Now you’ll be able to see the distinction between the 2 choices. I like to recommend utilizing normal out-of-the-box function if it fulfills your enterprise requirement.

Warren Mason is a System Administrator at Gurukul on Cloud (GoC). At GoC they’re utilizing Salesforce Circulation to streamline Gross sales Processes. Warren has a requirement to show the next logged-In customers fields on a display stream within the read-only mode:

1. First Identify
2. Final Identify
3. Electronic mail
4. Cell

Automation Champion Strategy (I-do): Possibility 1 – Show Textual content

We are going to use a Show Textual content component to unravel the above enterprise requirement.

Step 1: Outline Circulation Properties

1. Click on Setup.
2. Within the Fast Discover field, kind Flows.
3. Choose Flows then click on on the New Circulation.
4. Choose the Display Circulation choice and click on on Create and configure the stream.
5. It can open the stream designer for you.

Step 2: Add a Display Component to Show the fields in Learn Solely Mode

1. On Circulation Designer, click on on the +icon and choose the Display component.
2. Enter the next info:
   1. Enter Label the API Identify will auto-populate.
3. Click on Performed. 

Step 2.1: Add a Show Textual content Part to Present the Logged-In Consumer Particulars

1. Below the Enter part on Display Component, drag and drop the Show Textual content part onto the display. 
2. Enter the next info:
   1. Enter a reputation within the API Identify subject.
   2. Kind your message within the textual content field, as proven within the video.
3. Click on Performed.

Ultimately, Warren’s Circulation will appear to be the next screenshot:

As soon as all the pieces seems to be good, Save the Circulation. 

Proof of Idea

Now onwards, when a enterprise consumer runs the display stream will mechanically show the logged-in consumer info in read-only format.

Automation Champion Strategy (I-do): Possibility 2 – Customized Circulation Display Part (Lightning Net Part)

We are going to create a customized stream display part utilizing lightning net part to unravel the above enterprise requirement.

Step 1: Create a Customized Display Circulation Part Utilizing the Lightning Net Part

To begin with, create a Learn solely Lightning Net Part utilizing the code under. For those who don’t know easy methods to create a lightning part then please evaluation this developer information Create a Lightning Web Component.

screenFlowReadOnlyComponent.html

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

			

screenFlowReadOnlyComponent.js

import { LightningElement, wire, api, observe } 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 model="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://cleaning soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Learn Solely Part</masterLabel>
    <description>Learn Solely Part</description>
    <targets>
        <goal>lightning__FlowScreen</goal>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property identify="fieldLabel" label="Discipline Label" kind="String" required="true" description="The label that seems above the sphere."/>
            <property identify="fieldValue" label="Discipline Worth" kind="String" required="true" description="To supply a price set this attribute worth."/>
            <property identify="fieldType" label="Discipline DataType" kind="String" required="true" description="Legitimate enter sorts are checkbox, date, datetime, time, e mail, password, tel, url, quantity, textual content (default), toggle."/>
            <property identify="fieldLevelHelp" label="Discipline Stage assist" kind="String" description="Assist Textual content"/>
        </targetConfig>
 </targetConfigs>
</LightningComponentBundle>

			

Copy code from GitHub or Set up utilizing this URL. 

Step 1: Outline Circulation Properties

1. Click on Setup.
2. Within the Fast Discover field, kind Flows.
3. Choose Flows then click on on the New Circulation.
4. Choose the Display Circulation choice and click on on Create and configure the stream.
5. It can open the stream designer for you.

Step 2: Add a Display Component to Show the fields in Learn Solely Mode

1. On Circulation Designer, click on on the +icon and choose the Display component.
2. Enter the next info:
   1. Enter Label the API Identify will auto-populate.
3. Click on Performed. 

Step 2.1: Add a Show Textual content Part to Present the Logged-In Consumer Particulars

1. Below the Enter part on Display Component, drag and drop the Show Textual content part onto the display. 
2. Enter the next info:
   1. Enter a reputation within the API Identify subject.
   2. Kind your message within the textual content field, as proven within the video.
3. Click on Performed.

Ultimately, Warren’s Circulation will appear to be the next screenshot:

As soon as all the pieces seems to be good, Save the Circulation.

Proof of Idea

Now onwards, when a enterprise consumer runs the display stream will mechanically show the logged-in consumer info in read-only format.

Formative Evaluation:

I need to hear from you!

What’s one factor you realized from this submit? How do you envision making use of this new information in the actual world? Be at liberty to share within the feedback under.