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.

sfdx force:lightning:component:create --type lwc --componentname recordview --outputdir force-app\main\default\lwc

Use the below recordview.html code

<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

import { LightningElement ,api} from 'lwc';

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

Use the below recordview.js-meta.xml code

<?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.

<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.

<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.

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.