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 9 10 11 12 |
<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> <br/><br/> <p><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong> <span style="font-size:15px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span> <a href="https://www.w3web.net/" target="_blank" style="text-decoration:none;" rel="noopener noreferrer">An easy way to learn step-by-step online free tutorial, To know more Click <span style="color:#ff8000; font-size:18px;">Here..</span></a></strong></p> </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 | You May Also Like
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 | Insert new record using lightning data service and navigating to record detail page in lwc
Use the template if:true|false conditions and displaying account fields uses of “lightning-record-edit-form” Data Service in Lightning Web Component — LWC | How to display account fields uses of data service in lwc
Fetching Account Records From @wire Decorators in Lightning Web Components through Apex Method “@AuraEnabled (cacheable=true)” in The Table Format — LWC | Fetching account records from @wire decorators in lwc
How to Insert a Record of Account Object Using Apex Class in Salesforce Lightning Web Component-LWC | Insert a Account Record in lwc
Creating Record in Contact Object and Redirecting to Detail Page Simply Using With ‘@salesforce/schema/Contact’ in Salesforce Lightning Web Component – LWC | create contact record and navigate to record detail in lwc
Retrieving data from Account using @wire Decorators in Lightning web Components with apex method and lightning datatable — LWC | how to fetch account records using @wire decorators in lwc
Insert New Record in Custom Object and Navigate to the Record Detail Page Using Apex class method in Lightning Web Component — LWC | Insert record and navigate to record detail page in lwc
Calling an apex method imperatively and fetching contact record from database without @wire through lightning data-table in LWC | how to call an apex method imperatively in lwc
Author of w3web.net
Hi, This is Vijay behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time.
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.
Hi Its Very Nice Post
5 Internet Approval Site (Do Follow Backlinks)
Nice guidance.
Yes follow me
great post