lightning-record-view-form

lightning-record-view-form

A lightning-record-view-form component is a wrapper component that accepts a record ID and is used to display one or more fields and labels associated with that record using lightning-output-field. lightning-record-view-form requires a record ID to display the fields on the record. It doesn’t require additional Apex controllers or Lightning Data Service to display record data. This component also takes care of field-level security and sharing for you. Users will see data only if they have access to view specific field and record.

Lets create simple lightning web component to get account detail.

lightning-record-view-form example in lightning web component

Create recordIdExampleLWC lightning web component from Visual studio code. Use Control shift P and type SFDX: Create Lightning Web Component.

recordIdExampleLWC.html

In html file, we are using lightning-record-view-form to show account detail using recorid. We can also use recordid to query Account record or some other details related to account.

 
<template>
    <div class="acc-container">
        <lightning-record-view-form record-id={recordId} object-api-name="Account">
            <div class="slds-grid">
                <div class="slds-col slds-size_1-of-2">
                    <lightning-output-field field-name="Name"></lightning-output-field>
                    <lightning-output-field field-name="Website"></lightning-output-field>
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <lightning-output-field field-name="Industry"></lightning-output-field>
                    <lightning-output-field field-name="AnnualRevenue"></lightning-output-field>
                </div>
            </div>
        </lightning-record-view-form>
    </div>
</template>

recordIdExampleLWC.js

import { LightningElement,api } from 'lwc';

export default class RecordIdExampleLWC extends LightningElement {
    @api recordId;
}

recordIdExampleLWC.css

Lets apply some styles to our component

 
.acc-container {
    background: white !important;
    border: 1px solid black !important;
}

recordIdExampleLWC.js-meta.xml

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

No we can add this lwc component on account detail page.

  • Go to Account tab.
  • Open any record.
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your recordIdExampleLWC component and drag it on right hand side top.
  • Click Save and activate.

We will have following output.

Get Record Id in Lightning Web Component Account Record

 

Supported Objects

This component doesn’t support all Salesforce standard objects. For example, the Event and Task objects are not supported. This limitation also applies to a record that references a field that belongs to an unsupported object.

External objects and person accounts are not supported.

For more details please refer to official link.

Happy Coding 🙂

Permanent link to this article: https://www.sfdcpoint.com/salesforce/lightning-record-view-form/

3 comments

    • Sivakumar on September 1, 2020 at 8:39 pm
    • Reply

    Can we display this component in community cloud for users??

    • Ragula Sivakumar on November 13, 2020 at 9:58 pm
    • Reply

    Hi Ankush,

    Can we display the fields based on record types.

    let say one field need to display if the record type is A and if the record type is B another field need to display.

    Using getobjectinfo we can get the record type info and not sure how to pass on field to display. Do you have any idea

    • Vaishnavi on May 25, 2022 at 4:57 pm
    • Reply

    Hello Ankush,
    I have followed the same steps but I am not seeing this component in record page.
    Let me know what am I missing?

Leave a Reply

Your email address will not be published.