Hey guys, today 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.
Files we used in this post example:-
updateRecordLwc.html | Lightning Web Component HTML | Template HTML file for used to write HTML element for user interface. |
updateRecordLwc.js | Lightning Web Component JavaScript | It is importing Apex Class, Apex method, Object and fields from "@salesforce/apex/" |
updateRecordLwc.js-meta.xml | XML Meta File | It is used for where this lightning web component should be exposed. |
Live Demo
Other related post that would you like to learn in LWC
Step 1:- Create Lightning Web Component : updateRecordLwc.html
SFDX:Lightning Web Component >> New >> updateRecordLwc.html
updateRecordLwc.html [Lightning Web Component HTML]
1 2 3 4 5 6 7 8 |
<template> <lightning-card title="LWC Example 2"> <br/><br/> <h2 class="slds-text-color--error">How to Edit/Update record without apex class by help of the lightning data service in LWC</h2> <lightning-record-form object-api-name={ContactObjectApiName} fields={ContactFieldList} record-id={recordId} onsuccess={contactHandleUpdate}></lightning-record-form> </lightning-card> </template> |
Step 2:- Create Lightning Web Component : updateRecordLwc.js
SFDX:Lightning Web Component >> New >> updateRecordLwc.js
updateRecordLwc.js [LWC JavaScript File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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
SFDX:Lightning Web Component >> New >> updateRecordLwc.js-meta.xml
updateRecordLwc.js-meta.xml [LWC Meta Data XML]
1 2 3 4 5 6 7 8 9 10 |
<?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> |
Further post that would you like to learn in LWC
Nice info about create and edit of this
Hi. your post is so nice and I really loved reading your post.
It was very well authored and easy to understand. Great Thanks for sharing awesome info. I really love to read your blog.