How to use output-field label/value represents as a read-only help-text Using of lightning:outputField element in Salesforce LWC

[vijayk3327]

In this post we are going to learn about How to use lightnin goutput field label/value represents as a read-only help-text Using of lightning:outputField element in Salesforce LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : lwcOutputField.html

`

<!-- Replace the record ID with your own -->
<lightning-record-view-form
    record-id="0035g00000EdZMFAA3"
    object-api-name="Contact"
>
    <div class="slds-box slds-theme_default">
        <h3 class="slds-text-heading_medium"><lightning-icon icon-name="custom:custom85" size="small"></lightning-icon> <strong style="color:#270086; font-size:13px; margin-right:5px;"> Output Field to represents a read-only display of a label, help text, and value in Lightning Web Component (LWC) </strong></h3>
        <br/><br/>

        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_6-of-12">
                <lightning-output-field field-name="Name"> </lightning-output-field>
            </div>
            <div class="slds-col slds-size_6-of-12">
                <lightning-output-field field-name="Phone"></lightning-output-field>
            </div>
            <div class="slds-col slds-size_6-of-12">
                <lightning-output-field field-name="Email"></lightning-output-field>
            </div>
            <div class="slds-col slds-size_6-of-12">
                <lightning-output-field field-name="Title"></lightning-output-field>
            </div>
            <div class="slds-col slds-size_6-of-12">
                <lightning-output-field field-name="LeadSource"></lightning-output-field>
            </div>
            <div class="slds-col slds-size_6-of-12">
                <lightning-output-field field-name="Description"></lightning-output-field>
            </div>
        </div>

        
    </div>
    <br/><br/>
    <br/>

</lightning-record-view-form>

`

Step 2:- Create Lightning Web Component : lwcOutputField.js

` import { LightningElement } from 'lwc';
export default class LwcOutputField extends LightningElement {

}`

Step 3:- Create Lightning Web Component : lwcOutputField.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

→ Get source code live demo link:-