Lightning Web Component

Easy Lightning Record Edit Form Example in LWC

Lightning Record Edit Form simplifies the creation of data entry forms, automatically rendering input fields based on record data types on a Lightning Web Component.

The component handles data validation, CRUD operations and respects security rules.

Lightning Record Edit Form Example

Key features and benefits of the Lightning Record Edit Form include:

Editing a Record Using lightning-record-edit-form

Let's start with the HTML of our code, where we declare the lightning-record-edit-form. In this case, we use the record-id property since we will update an existing record.

The lightning-messages display any errors on the record creation, such as Validation rules, triggers, flow, etc.

<template>
    <lightning-record-edit-form
        object-api-name={objectApiName}
        record-id={recordId}
        onsuccess={handleSuccess}
    >
        <lightning-messages></lightning-messages>

        <section class="slds-grid">
            <div class="slds-col slds-size_1-of-2">
                <lightning-input-field field-name="Name"></lightning-input-field>
                <lightning-input-field field-name="Industry"></lightning-input-field>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning-input-field field-name="Website"></lightning-input-field>
                <lightning-input-field field-name="AccountNumber"></lightning-input-field>
            </div>
        </section>
        <lightning-button variant="brand" type="submit" label="Save"></lightning-button>
    </lightning-record-edit-form>
</template>
The lightning-button at the end will automatically save the record without adding any Javascript code, just using the type="submit".

The Javascript will be simple. If the record is saved successfully into the database, we will show a message. Remember to call the recordId using the @api decorator.

import { LightningElement, api } from "lwc";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class createRecord extends LightningElement {
    @api objectApiName;
    @api recordId;

    handleSuccess(){
        this.showMessage('Success!', 'Account edited successfully.', 'success');
    }

    showMessage(title, message, variant){
        const evt = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
        });
        this.dispatchEvent(evt);
    }
}

As you can see on the example below, there is no need to include a custom error handling since the lightning-messages will be in charge to display any error message.

Editing a record using Lightning Record Edit Form in LWC

Creating a Record Using lightning-record-edit-form

Here is the HTML to create a record using the lightning-record-edit-form. As you can see, no record-id property is declared on it since it will be a new record.

<template>
    <lightning-record-edit-form
    object-api-name={objectApiName}
    onsuccess={handleSuccess}
    >
        <lightning-messages></lightning-messages>

        <section class="slds-grid">
            <div class="slds-col slds-size_1-of-2">
                <lightning-input-field class="object-field" field-name="Name"> </lightning-input-field>
                <lightning-input-field class="object-field" field-name="Industry"> </lightning-input-field>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning-input-field class="object-field" field-name="Website"> </lightning-input-field>
                <lightning-input-field class="object-field" field-name="AccountNumber"> </lightning-input-field>
            </div>
        </section>
        <lightning-button variant="brand" type="submit" label="Save"></lightning-button>
    </lightning-record-edit-form>
</template>

In the Javascript, we will display a message telling the user that the record was created successfully using the Name of the record, also, we will clean the fields to improve the user experience.

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class codingComponentv2 extends LightningElement {
    @api objectApiName;

    handleSuccess(evt){
        this.showMessage('Success!', `Account: "${evt.detail.fields.Name.value}" created successfully.`, 'success');
        this.template.querySelectorAll('.object-field').forEach(input => {
            input.value = null;
        })
    }

    showMessage(title, message, variant){
        const evt = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
        });
        this.dispatchEvent(evt);
    }
}
Creating a record using Lightning Record Edit Form in LWC

Customizing the Form Layout

We have different ways to customize the layout to display the fields. We're going to use the slds-grid classes that Salesforce provides us.

Here are a few examples so you can have a reference:

<lightning-input-field field-name="Name"> </lightning-input-field>
<lightning-input-field field-name="Website"> </lightning-input-field>
<lightning-input-field field-name="Industry"> </lightning-input-field>
<lightning-input-field field-name="AccountNumber"> </lightning-input-field>
Lightning Record Edit Form in LWC - Form Layout 1
<section class="slds-grid">
    <div class="slds-col slds-size_1-of-2">
        <!-- field-name="Name" -->
        <!-- field-name="Industry" -->
    </div>
    <div class="slds-col slds-size_1-of-2">
        <!-- field-name="Website" -->
        <!-- field-name="AccountNumber" -->
    </div>
</section>
Lightning Record Edit Form in LWC - Form Layout 2
<section class="slds-grid">
    <div class="slds-col slds-size_1-of-3">
        <!-- field-name="Name" -->
        <!-- field-name="AccountNumber" -->
    </div>
    <div class="slds-col slds-size_1-of-3">
        <!-- field-name="Website" -->
    </div>
    <div class="slds-col slds-size_1-of-3">
        <!-- field-name="Industry" -->
    </div>
</section>
Lightning Record Edit Form in LWC - Form Layout 3
<section class="slds-grid">
    <div class="slds-col slds-size_1-of-4">
        <!-- field-name="Name" -->
    </div>
    <div class="slds-col slds-size_1-of-4">
        <!-- field-name="Website" -->
    </div>
    <div class="slds-col slds-size_1-of-4">
        <!-- field-name="Industry" -->
    </div>
    <div class="slds-col slds-size_1-of-4">
        <!-- field-name="AccountNumber" -->
    </div>
</section>
Lightning Record Edit Form in LWC - Form Layout 4