Lightning Web Component

Quick and Complete Lightning Record Form LWC Examples

The Lightning Record Form is a Salesforce LWC component that quickly creates forms for adding, viewing, or updating a record. It simplifies the process of creating record forms.

We will provide a lightning-record-form LWC example, including all the variables that can be customized, allowing you to create your version easily.

Lightning Record Form LWC Example

Editing a Record Using lightning-record-form

Let's see a step-by-step example of how to edit an Account using lightning-record-form.

1. Lightning Record Form

First, we need to declare our lightning-record-form on the HTML of our Lightning Web Component.

<template>
    <lightning-record-form
        record-id={recordId}
        object-api-name={objectApiName}
        fields={fields}
        columns="2"
        mode="edit"
        onsubmit={handleSubmit}
        onsuccess={handleSuccess}
    >
    </lightning-record-form>
</template>

As you can see, we will require a few properties to make it work. Let's see them:

2. Importing the Variables

On the Javascript, we will start importing all the necessary stuff to update the record successfully.

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

import NAME_FIELD from '@salesforce/schema/Account.Name';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class EditForm extends LightningElement {
    @api recordId;
    @api objectApiName;
    fields = [NAME_FIELD, INDUSTRY_FIELD];

}

3. Declaring the methods to handle the form

Finally, let's declare the methods to make the form update the record with the user values.

handleSubmit will be in charge of submitting the record to the database, and handleSuccess will call the other method showMessage, to display an alert telling the user that the record was saved successfully.

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

import NAME_FIELD from '@salesforce/schema/Account.Name';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class EditForm extends LightningElement {
    @api recordId;
    @api objectApiName;
    fields = [NAME_FIELD, INDUSTRY_FIELD];

    handleSubmit(evt) {
        evt.preventDefault();
        const fields = evt.detail.fields;
        this.template.querySelector('lightning-record-form').submit(fields);
    }

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

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

Here is the final result:

lightning-record-form lwc edit record example

If you're wondering how to handle the errors, you don't have to since there is a standard error handling that will be triggered for any exception from validation rules, triggers, flows, etc. This is how it looks like:

lightning-record-form lwc edit record errors

Creating a Record Using lightning-record-form

Now, let's create another example of a new record using lightning-record-form.

From the example above, the only part where the code changes is on the HTML when we declare the lightning-record-form.

<template>
    <lightning-record-form
        object-api-name={objectApiName}
        columns="2"
        layout-type="Full"
        onsubmit={handleSubmit}
        onsuccess={handleSuccess}
    >
    </lightning-record-form>
</template>

Here, we have a new property: layout-type, which is the type on how the fields will be displayed on the layout.

There are two different: Compact, which will use the fields from the Compact layout declared on the object, and Full, which will use all the fields declared on the page layout.

The Compact layout cannot be used on record creation so we will use Full in this case.

The only part of the Javascript you'll need to modify is the handleSuccess method. Now, we have the new Record Id property here.

handleSuccess(evt){
    this.showMessage('Success!', 'Account created successfully! RecordId: ' + evt.detail.id, 'success');
}

Here is how you create an account:

lightning-record-form lwc create record