Lightning Record Form in Lightning Web Component

Lightning-record-form is the base component that provides us with the desired functionality to create, view, and update the record.

It provides us with helpful features that make it easier to create a form as compared to record-edit-form and record-view-form.

It doesn’t require any Apex instead, it applies Lightning Data Service for viewing or editing the record. It also enforces the security so user can only see or update their accessible data.

Mode - It is the attribute that specifies the user interaction with the form. The following are the types of modes:

• View - It will display the record and also provide access to edit the record. Here record-id is the required parameter as this is used to view and edit the record. We cannot create a new record in this mode.

• Edit - This is used to create or edit the record. It will be the default mode if we don't specify any. If you are trying to edit the record then record-id is the required parameter.
• Readonly - It will display the record with no access to update it. It will not have any buttons on the forms. Let’s cover this with examples of all the three modes provided.1. ViewHere, we have created one component recordFormViewMode which has <lightning-record-form> tag and we specified the mode, layout-type, record-id, and object-api-name. In layout-type we also have “Full” as another option it will display the form as same as our page layout. The compact layout displays fields in the form that we have in the highlight panel.

<template>
    <lightning-card title="Record form view mode">
<lightning-record-form
layout-type="Compact"
mode="view"
record-id = {recordId}
object-api-name={objectApiName}>
</lightning-record-form>
</lightning-card>
</template>
        

import { LightningElement,api } from 'lwc';
export default class RecordFormViewMode extends LightningElement {
    @api recordId;
    @api objectApiName;

}        

<?xml version="1.0"?>
<LightningComponentBundle xmlns="https://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
	</targets>
</LightningComponentBundle>
        

As we can see it displays in the view mode but also has an edit icon with each field as an option to edit it.

OUTPUT

2. Edit

Here we have created one component RecordFormEditMode in which we are creating the record as we have not provided any recordId here. If we provide the ID it will be an editable form but here we are showing for creating the record.

We have listed specific fields here (Name, Phone). We can also apply a layout that is either full or compact.

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import PHONE_FIELD from '@salesforce/schema/Account.Phone';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
export default class RecordFormEditMode extends LightningElement {

    objectApiName = ACCOUNT_OBJECT;
    fields = [NAME_FIELD, PHONE_FIELD];

    handleSuccess(event) {
        this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Account Created',
                        message: 'Record ID: ' + event.detail.id,
                        variant: 'success'
                    })
                );
    }

}        

<template>
    <lightning-card title="Record form Edit mode">
<lightning-record-form
    object-api-name={objectApiName}
    onsuccess={handleSuccess}
    fields={fields}>
</lightning-record-form>
</lightning-card>
</template>        

<?xml version="1.0"?>
<LightningComponentBundle xmlns="https://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__AppPage</target>
	</targets>
</LightningComponentBundle>        

OUTPUT

In the toast message, we have shown the generated record-id.

3. Readonly

We have created one LWC named recordFormReadonlyMode to display the read-only mode of the lightning record form.

In the HTML snippet, you can see we have defined the layout and column. record-id and object-api-name is required parameter here.

<template>
    <lightning-card  variant="Narrow"  title="Record form Readonly mode">
    <lightning-record-form

        record-id={recordId}
        object-api-name={objectApiName}
        layout-type="Compact"
        columns="2"
        mode="readonly">

        </lightning-record-form>
    </lightning-card>
</template>        

import { LightningElement,api } from 'lwc';
export default class RecordFormReadonlyMode extends LightningElement {

@api recordId
@api objectApiName

}
        

OUTPUT

Advantages

1. There is no need to write any Apex to perform the DML operations.
2. It will improve the performance of our component.

Disadvantages

1. Lightning-record-form is not as fully customizable as record-edit-form and record-view-form.
2. It doesn’t support the auto-populating of records.

Conclusion

In this blog, we take a look at lightning-record-form in Lightning Web Component with examples in all the three modes that record-form provides.

Overall, the blog provides a complete guide on lightning-record-form in Salesforce LWC, showcasing a practical example of different modes with DML operations.

Unlock the Power of Lightning Web Components: Learn How to use Lightning Record Form In LWC!???

Also, know more about How to use lightning/uiRecordApi In LWC

Read the full article now! Also, stay tuned for more such content on Lightning Web Component(LWC).

#LightningWebComponents #Salesforce #TrailblazerCommunity #Trailhead? #lwc #salesforce developer