display lightning output fields label/value as a read-only in Salesforce LWC

How to use output-field label/value represents as a read-only help-text Using of lightning:outputField element in Salesforce LWC | how do you display lightning output fields label/value as a read-only in Salesforce lightning web component — LWC

by
12,368 views

Hey guys, today 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.

Use the lightning-output-field component in lightning-record-view-form to display the value of a record field on a Salesforce object. Use the field-name attribute to specify the API field name.

A lightning-output-field component displays the field value in the correct format based on the field type. You must provide the record ID in the wrapper lightning-record-view-form component, and specify the field name on lightning-output-field. For example, if field-name references a date and time value, then the default output value contains the date and time in the user’s locale. If field-name references an email address, phone number, lookup, or URL, then a clickable link is displayed. To know more details about lightning-output-field in Salesforce LWC, Click Here..

Why Should You Schedule Meeting?

🎯 If You Are Facing Any Of These 6 Challenges. Schedule Meeting With Me.

  • Learn Salesforce Development
  • Career Confusion
  • No Interview Call
  • Low Salary
  • No Promotion/Growth
  • No Finding New Job Opportunity
  • Why you stucking from past so many years in same company?

 

 

 

Files we used element lightning-output-field in Salesforce LWC →

lwcOutputField.html LWc HTML File Template HTML file to display output fields label/value in Salesforce Lightning Web Component (LWC)
lwcOutputField.js LWC JavaScript File It’s hold import/export method in Salesforce LWC.
lwcOutputField.js-meta.xml XML Meta File It is used to where this lightning web component file you want to display as lightning__AppPage, lightning__RecordPage, lightning__HomePage.

 

Final Output →

display lightning output fields label/value as a read-only in lwc -- w3web.net
 

 

You can download file directly from github by Click Here.

 
 

Other related post that would you like to learn in Salesforce
  • Find the below steps

Create Lightning Web Component HTML →

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

SFDX:Lightning Web Component >> New >> lwcOutputField.html

lwcOutputField.html [Lightning Web Component HTML]

  1.    <template>
  2.  
  3.     <!-- Replace the record ID with your own -->
  4.     <lightning-record-view-form
  5.         record-id="0035g00000EdZMFAA3"
  6.         object-api-name="Contact"
  7.     >
  8.         <div class="slds-box slds-theme_default">
  9.             <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>
  10.             <br/><br/>
  11.  
  12.             <div class="slds-grid slds-wrap">
  13.                 <div class="slds-col slds-size_6-of-12">
  14.                     <lightning-output-field field-name="Name"> </lightning-output-field>
  15.                 </div>
  16.                 <div class="slds-col slds-size_6-of-12">
  17.                     <lightning-output-field field-name="Phone"></lightning-output-field>
  18.                 </div>
  19.                 <div class="slds-col slds-size_6-of-12">
  20.                     <lightning-output-field field-name="Email"></lightning-output-field>
  21.                 </div>
  22.                 <div class="slds-col slds-size_6-of-12">
  23.                     <lightning-output-field field-name="Title"></lightning-output-field>
  24.                 </div>
  25.                 <div class="slds-col slds-size_6-of-12">
  26.                     <lightning-output-field field-name="LeadSource"></lightning-output-field>
  27.                 </div>
  28.                 <div class="slds-col slds-size_6-of-12">
  29.                     <lightning-output-field field-name="Description"></lightning-output-field>
  30.                 </div>
  31.             </div>
  32.  
  33.  
  34.         </div>
  35.         <br/><br/>
  36.         <br/>
  37.    <!--Start RelatedTopics Section-->
  38. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  39.  
  40.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>
  41.  
  42.             <br/><br/>
  43.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
  44.             <div style="display:block; overflow:hidden;"> 
  45.                 <div style="width: 50%; float:left; display:inline-block">
  46.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  47.                         <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
  48.                         <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
  49.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
  50.                         <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
  51.                         <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
  52.                     </ul>
  53.             </div>
  54.  
  55.             <div style="width: 50%; float:left; display:inline-block">
  56.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  57.                         <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
  58.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
  59.                         <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
  60.                         <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
  61.                         <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
  62.                     </ul>
  63.                 </div>
  64.                <div style="clear:both;"></div> 
  65.                <br/>
  66.                 <div class="youtubeIcon">
  67.                     <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
  68.                 </div>
  69.     </div>
  70.  
  71. </div>
  72.  
  73.   <!--End RelatedTopics Section-->
  74.     </lightning-record-view-form>
  75.  
  76. </template>

Create Lightning Web Component JavaScript →

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

SFDX:Lightning Web Component >> New >> lwcOutputField.js

lwcOutputField.js [LWC JavaScript File]

  1.    import { LightningElement } from 'lwc';
  2.     export default class LwcOutputField extends LightningElement {
  3.  
  4.    }

Create Lightning Web Component Meta XML →/h3>

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

SFDX:Lightning Web Component >> New >> lwcOutputField.js-meta.xml

lwcOutputField.js-meta.xml [LWC Meta Data XML]

  1.    <?xml version="1.0" encoding="UTF-8"?>
  2. <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  3.     <apiVersion>45.0</apiVersion>
  4.     <isExposed>true</isExposed>
  5.     <targets> 
  6.         <target>lightning__AppPage</target>
  7.         <target>lightning__RecordPage</target>
  8.         <target>lightning__HomePage</target>
  9.     </targets>
  10. </LightningComponentBundle>

 

Further post that would you like to learn in Salesforce

 

TechW3web:- To know more, Use this Link


 

FAQ (Frequently Asked Questions)

How do you display output field in lightning component?

Use the lightning-output-field component in lightning-record-view-form to display the value of a record field on a Salesforce object. Use the field-name attribute to specify the API field name.

What is output field?

Output fields are where an action stores a result. For example, in the Images: resize an image action, the output fields store info like, New Height , File Width , File type and File extension.

What is output field in Salesforce?

A read-only display of a label and value for a field on a Salesforce object. Use this component to get user input for a controller method that does not correspond to a field on an sObject.

Related Topics | You May Also Like

 
  

Our Free Courses →

👉 Get Free Course →

📌 Salesforce Administrators

📌 Salesforce Lightning Flow Builder

📌 Salesforce Record Trigger Flow Builder
👉 Get Free Course →

📌 Aura Lightning Framework

📌 Lightning Web Component (LWC)

📌 Rest APIs Integration



Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

Leave a Comment