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 🙂
