Record View Form in LWC

lightning-record-view-form is standard component that lets users to create a form that displays fields data for a specific record of an object.

To specify read-only fields, use lightning-output-field components inside 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.

You can display the record data with two ways:

1. RecordForm

2. RecordView Form

We will discuss both in the ways in this article.

RecordForm

It is used in a situation where we don't want to customize the form layout. It will display fields as per standard layout. It accepts parameter recordId and objectApiName. You can also define the number of columns you want to display.

Here, I have created a component "recordViewDemo". Follow the below code to see the implementation.

1. recordViewDemo.html

Use record-id and object-api-name to pass the ID of the record and the corresponding object API name to be displayed. You can also specify other options like mode is view (read only mode),layout- (Full,Compact) is full that means it will display all the fields as per standard layout. You can also define no of columns to be displayed.

2. recordViewDemo.js

The record page provides objectApiName and recordId.

3. recordViewDemo.js-meta.xml

In the xml file, we need to define targets where we want to use this component. So we have added a targets section of lightning__RecordPage.

That's all, just deploy this source to org and add this component(drag and drop) to Account record. To add this component, go to Account record page -> Settings->Edit page. Drag your component on the page, save and activate it.

See the output below.

2. RecordViewForm

If you want to customize the form layout then we should use RecordViewForm. It is used to create a form that displays Salesforce record data for specified fields associated with that record. The fields are rendered with their labels and current values as read-only. You can provide custom rendering of record data.

lightning-record-view-form requires a record ID to display the fields on the record. Refer below example:-

1. recordViewDemo.html

recordViewDemo.js

recordViewDemo.js-meta.xml

Will be same as shown in above example. Now, see the output will look like the below image.

Kindly do comment on blog if you have any queries.