Lightning-record-edit-form LWC

The lightning-record-edit-form LWC is a powerful tool that enables developers to create custom forms to edit records. The component provides a number of features that make it easy to build robust forms that meet a wide range of needs.

What is lightning-record-edit-form?

lightning-record-edit-form is a standard Lightning Web Component that is available in the Lightning Web Components framework. It is built on top of the Lightning Data Service (LDS), which provides a standard way to work with data in Salesforce.

The component allows developers to create custom forms that display and edit record data from a specific object. It automatically handles standard form elements like input fields, picklists, and checkboxes, and provides a range of options for customizing the form layout, validation rules, and error handling.

How to use lightning-record-edit-form

To use lightning-record-edit-form, you must first create a Lightning Web Component and import the component into your code. You can do this using the standard @salesforce imports:

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { createRecord } from 'lightning/uiRecordApi';
import { NavigationMixin } from 'lightning/navigation';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import PHONE_FIELD from '@salesforce/schema/Account.Phone';
import WEBSITE_FIELD from '@salesforce/schema/Account.Website';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import ANNUALREVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import OWNERSHIP_FIELD from '@salesforce/schema/Account.Ownership';
import DESCRIPTION_FIELD from '@salesforce/schema/Account.Description';

Once you have imported the component, you can use it in your code as follows:

<template>
    <lightning-record-edit-form object-api-name={ACCOUNT_OBJECT.objectApiName} onsuccess={handleSuccess}>
        <lightning-messages></lightning-messages>
        <div class="slds-grid slds-gutters">
            <div class="slds-col">
                <lightning-input-field field-name={NAME_FIELD.fieldApiName}></lightning-input-field>
                <lightning-input-field field-name={PHONE_FIELD.fieldApiName}></lightning-input-field>
                <lightning-input-field field-name={WEBSITE_FIELD.fieldApiName}></lightning-input-field>
            </div>
            <div class="slds-col">
                <lightning-input-field field-name={INDUSTRY_FIELD.fieldApiName}></lightning-input-field>
                <lightning-input-field field-name={ANNUALREVENUE_FIELD.fieldApiName}></lightning-input-field>
                <lightning-input-field field-name={OWNERSHIP_FIELD.fieldApiName}></lightning-input-field>
            </div>
        </div>
        <lightning-textarea field-name={DESCRIPTION_FIELD.fieldApiName}></lightning-textarea>
        <div class="slds-m-top_medium">
            <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
        </div>
    </lightning-record-edit-form>
</template>

This code creates a form for editing an Account record. It includes several standard input fields, as well as a custom text area and a submit button. When the user submits the form, the handleSuccess function is called, which shows a toast message to indicate that the record has been successfully saved:

handleSuccess(event) {
    const toastEvent = new ShowToastEvent({
        title: 'Success!',
        message: 'Account Created Successfully!',
        variant: 'success'
    });
    this.dispatchEvent(toastEvent);
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: event.detail.id,
            objectApiName: ACCOUNT_OBJECT.objectApiName,
            actionName: 'view'
        }
    });
}

Conclusion

In summary, the lightning-record-edit-form LWC is a powerful tool for building custom forms that edit record data in Salesforce. It provides a range of features for customizing form layout, validation rules, and error handling, and is built on top of the Lightning Data Service for seamless integration with Salesforce data.