Lightning Data Service – Lightning Record View Form

lightning-record-view-form component will display the record details by using record-id and lightning-output-field. This component is also based on LDS(Lightning Data Service).

We will show the user record by lightning-record-view-from component.

So, we have built a LWC named “showLRVFRecord“.

Step 1: As per previous examples, we need to update the “showLRVFRecord.js-meta.xml” file to set the visibility in Lightning App Builder.

showLRVFRecord.js-meta.xml

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

Step 2: Need to write the respective HTML file.

showLRVFRecord.html

<template>
        <lightning-card title="Showing User Record by Lightning Record Form"  icon-name="standard:user">
            <div class="slds-m-around_medium">
                <lightning-record-view-form object-api-name="User"
                                            record-id={userId}>
                    <div class="slds-box">
                        <lightning-output-field field-name="Name">
                        </lightning-output-field>
                        <lightning-output-field field-name="Alias">
                        </lightning-output-field>
                        <lightning-output-field field-name="Email">
                        </lightning-output-field>
                    </div>                                
                </lightning-record-view-form>                                                  
            </div>
        </lightning-card>
</template>

Here, we have defined lightning-record-view-form using the help of lightning-output-field to present the fields in output read only mode.

Step 3: Now, we need to work on the JS file.

showLRVFRecord.js

import { LightningElement } from 'lwc';
import CURRENTUSERID from '@salesforce/user/Id';

export default class ShowLRVFRecord extends LightningElement {
    userId = CURRENTUSERID;
}

We have passed logged in User Id to userId property.

Step 4: At last, need to add this LWC into Lightning App/Home or Record Page. Or, you can call this component from another component.

Result

Important Facts

This component will also not support all standard objects like Event, Task.
We can easily use lightning-record-from using “readonly” mode instead of using this component to show the output in read only version.

12,753 total views, 3 views today