How to Insert, Edit/Update record without apex class by help of the lightning data service using “lightning-record-form” in Lighting Web Component — LWC

[vijayk3327]

In this post we are going to learn about How to Edit/Update record without apex class by help of the lightning data service Using “lightning-record-form” in Lighting Web Component — LWC

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : updateRecordLwc.html

`

How to Edit/Update record without apex class by help of the lightning data service in LWC

    <lightning-record-form object-api-name={ContactObjectApiName} fields={ContactFieldList} record-id={recordId} onsuccess={contactHandleUpdate}></lightning-record-form>

</lightning-card>

`

Step 2:- Create Lightning Web Component : updateRecordLwc.js

` import { api, LightningElement } from 'lwc';
import contactFirstName from '@salesforce/schema/Contact.FirstName';
import contactLastName from '@salesforce/schema/Contact.LastName';
import contactEmail from '@salesforce/schema/Contact.Email';
import contactPhone from '@salesforce/schema/Contact.Phone';
import contactAccount from '@salesforce/schema/Contact.AccountId';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class updateRecordLwc extends LightningElement {
@api ContactObjectApiName='Contact';
@api recordId;
ContactFieldList = [contactFirstName,contactLastName,contactEmail,contactPhone,contactAccount];

contactHandleUpdate(event){
    const evt = new ShowToastEvent({
        title:'Record Updated',
        message:'Contact record: ' + event.detail.fields.LastName.value + 'is successfully updated',
        variant:'success',
      })
      this.dispatchEvent(evt);
}

}`

Step 3:- Create Lightning Web Component : updateRecordLwc.js-meta.xml

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

→ Get source code live demo link:-