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
Related Topics
How to Insert New Record in Account Object and Navigate to the Record Detail Page without Apex class using Lightning Data Service in Lightning Web Component — LWC
Fetching Account Records From @wire Decorators in Lightning Web Components through Apex Method “@AuraEnabled (cacheable=true)” in The Table Format — LWC
How to Insert a Record of Account Object Using Apex Class in Salesforce Lightning Web Component-LWC
Creating Record in Contact Object and Redirecting to Detail Page Simply Using With ‘@salesforce/schema/Contact’ in Salesforce Lightning Web Component – 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.