Usage Of lightning-record-view-form
Let us discuss here how to use the 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-fieldlightning-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.
Displaying Record Fields
Create a Lightning web component using the below SFDX command.
|
1 |
sfdx force:lightning:component:create --type lwc --componentname recordview --outputdir force-app\main\default\lwc |
Use the below recordview.html code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<template> <lightning-record-view-form record-id={recordId} object-api-name="Contact"> <div class="slds-box"> <lightning-output-field field-name="FirstName"> </lightning-output-field> <lightning-output-field field-name="LastName"> </lightning-output-field> <lightning-output-field field-name="MobilePhone"> </lightning-output-field> <lightning-output-field field-name="Email"> </lightning-output-field> </div> </lightning-record-view-form> </template> |
Use the below recordview.js code
|
1 2 3 4 5 |
import { LightningElement ,api} from 'lwc'; export default class Recordview extends LightningElement { @api recordId ; } |
Use the below recordview.js-meta.xml code
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
Push changes and add to the page layouts.you can able to see the below output.
To create a multi-column layout for your record view, use the Grid utility classes in Lightning Design System. This example creates a two-column layout.
Update the code as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<template> <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="Phone"></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> </template> |
Push the changes and you can able to see the result as below.
We’ve seen how record fields render using lightning-input-field and lightning-output-field. To render data in a custom way, use the getRecord or getRecordUi wire adapters.
Update the code as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<template> <lightning-record-view-form record-id={recordId} object-api-name={accountObject}> <div class="slds-grid"> <div class="slds-col slds-size_1-of-2"> <!-- Other record data here --> </div> <div class="slds-col slds-size_1-of-2"> <lightning-formatted-text value={nameValue} class="slds-text-heading_large"> </lightning-formatted-text> </div> </div> </lightning-record-view-form> </template> |
In the component’s JavaScript code, import references to the account object and the name field. The getRecord wire adapter loads the name field for custom rendering in the lightning-formatted-text component instead of the standard lightning-output-field used by lightning-record-view-form.
update the code as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import { LightningElement, api, wire } from 'lwc'; /* Wire adapter to fetch record data */ import { getRecord, getFieldValue } from 'lightning/uiRecordApi'; import ACCOUNT_OBJECT from '@salesforce/schema/Account'; import NAME_FIELD from '@salesforce/schema/Account.Name'; export default class Recordview extends LightningElement { /** Id of record to display. */ @api recordId; /* Expose schema objects/fields to the template. */ accountObject = ACCOUNT_OBJECT; /* Load Account.Name for custom rendering */ @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD] }) record; /** Gets the Account.Name value. */ get nameValue() { return this.record.data ? getFieldValue(this.record.data, NAME_FIELD) : ''; } } |
You can able to see the UI as shown below.
