SalesforceBlue

Feel the rhythm of Salesforce

LWC

Using lightning-record-edit-form Component

lightning-record-edit-form supports the following features.

  • Editing a record’s specified fields, given the record ID.
  • Creating a record using specified fields.
  • Customizing the form layout
  • Custom rendering of record data

lightning-record-edit-form implements Lightning Data Service and doesn’t require additional Apex controllers to create or update record data. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.

Editing A Record Using lightning-record-edit-form:

Please create a component (LWC) with the name as lwcRecordEditForm and add the following code to it.

<template>
    <lightning-card title="Quick Edit">

        <lightning-record-edit-form
            record-id={recordId}
            object-api-name={objectApiName}
            onsuccess={handleSuccess}>
            <lightning-input-field field-name={nameField} ></lightning-input-field>
            <lightning-input-field field-name={annualRevenueField}></lightning-input-field>
            <lightning-input-field field-name={phoneField}></lightning-input-field>
            <lightning-button
                class="slds-m-top_small"
                variant="brand"
                type="submit"
                name="update"
                label="Update"
            >
            </lightning-button> 
    </lightning-record-edit-form>
    </lightning-card>
</template>
import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import PHONE_FIELD from '@salesforce/schema/Account.Phone';
import ANNUALREVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class LwcRecordViewForm extends LightningElement {
    @api recordId;
    objectApiName = ACCOUNT_OBJECT;
    nameField = NAME_FIELD;
    annualRevenueField = ANNUALREVENUE_FIELD;
    phoneField = PHONE_FIELD;

    handleSuccess(event) {
     
        const evt = new ShowToastEvent({
            title: 'Account Updated',
            message: 'Record ID: ' + event.detail.id,
            variant: 'success',

        });
        
        this.dispatchEvent(evt);

    }
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>52.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

Add this component to Account’s record page. You will get an output like the below:


Creating A Record Using lightning-record-edit-form:

Here we have to specify the fields and object API name along with respective handlers. Please note that we don’t specify the record-id in this case.

In the below example we are creating a contact record from the account’s record page.

Please copy the following code in the same component which we have created above:

<template>
    <lightning-card title="Quick Contact Create">

        <lightning-record-edit-form
            object-api-name={objectApiName}
            onsubmit={handleSubmit}
            onsuccess={handleSuccess}>
            <lightning-input-field field-name={firstNameField} ></lightning-input-field>
            <lightning-input-field field-name={lastNameField}></lightning-input-field>
            <lightning-button
            variant="brand"
            type="submit"
            name="save"
            label="Save"
            >
            </lightning-button> 
    </lightning-record-edit-form>
    </lightning-card>
</template>
import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName';
import ACCOUNT_ID_FIELD from '@salesforce/schema/Contact.AccountId';
import CONTACT_OBJECT from '@salesforce/schema/Contact';

export default class LwcRecordViewForm extends LightningElement {
    @api recordId;
    objectApiName = CONTACT_OBJECT;
    firstNameField = FIRST_NAME_FIELD;
    lastNameField = LAST_NAME_FIELD;
    

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

    handleSuccess(event) {
     
        const evt = new ShowToastEvent({
            title: 'Contact Created',
            message: 'Record ID: ' + event.detail.id,
            variant: 'success',

        });
        
        this.dispatchEvent(evt);

    }
}

Refresh the account record page and view the output. It will look like the below:


Here is the complete reference of lightning-record-edit-form from the official docs. Please click on the link to check out the official docs for lightning-record-edit-form.

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂


Leave a Reply

Your email address will not be published. Required fields are marked *