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 🙂
