SalesforceBlue

Feel the rhythm of Salesforce

LWC

Using lightning-record-view-form Component

To load a record you can use the lightning-record-form. However, if you are looking for a custom look and feel then you can go with lightning-record-view-form.

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, so users see only the data they have access to.

Let’s understand this with an example. Please create a component(LWC) and name it as lwcRecordViewForm and add the following code:

<template>
    <lightning-card title="Quick View">

        <lightning-record-view-form
            record-id={recordId}
            object-api-name={objectApiName}>
            <lightning-output-field field-name={nameField}></lightning-output-field>
            <lightning-output-field field-name={annualRevenueField}></lightning-output-field>
            <lightning-output-field field-name={phoneField}></lightning-output-field>
        </lightning-record-view-form>
    </lightning-card>
</template>
import { LightningElement, api } from 'lwc';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import PHONE_FIELD from '@salesforce/schema/Account.Phone';
import ANNUALREVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class LwcRecordViewForm extends LightningElement {
    @api recordId;
    objectApiName = ACCOUNT_OBJECT;
    nameField = NAME_FIELD;
    annualRevenueField = ANNUALREVENUE_FIELD;
    phoneField = PHONE_FIELD;

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

Add the above component to the Account’s record page. You will get an output like the below:


Here is the complete reference of lightning-record-view-form from the official docs. Please click on the link to check out the official docs for lightning-record-view-form.

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂


Leave a Reply

Your email address will not be published. Required fields are marked *