LDS aids in data interaction when dealing with a single record. Let’s explore the usage of lightning-record-edit-form in LWC.
When working with Lightning Web Components, it is a common task for Salesforce Developers to engage with data.
It wouldn’t be equitable on Salesforce’s part to expect developers to write 30-40 lines of code each time there is a need for data interaction.
In a manner reminiscent of Standard Controllers in Salesforce Classic, there is a feature called Lightning Data Services (LDS) in LWC.
However, there’s a caveat: LDS can only be employed when interacting with a single record.
LDS offers three tags specifically designed for data interaction:
- lightning-record-edit-form
- lightning-record-view-form
- lightning-record-form
This post will specifically delve into the usage of lightning-record-edit-form.
In the below code if I don’t provide `record-id` then I can use the same tag to create a new record. If recordId is provided then we can update the record.
<template>
<lightning-record-edit-form
object-api-name="Account"
record-id={recordId}>
<lightning-input-field field-nam="Name"></lightning-input-field>
<lightning-input-field field-nam="Industry"></lightning-input-field>
<lightning-input-field field-nam="Rating"></lightning-input-field>
</lightning-record-edit-form>
</template>
That’s it!
There is no need to use any JavaScript methods involved etc. However, if you are interested in using it, nothing is stoping you.
You can use attributes like onsubmit, onsuccess and onerror.
<template>
<lightning-record-edit-form
object-api-name="Account"
record-id={recordId}
onsubmit={handleSubmit}
onsuccess={handleSuccess}
onerror={handleError}>
</lightning-record-edit-form>
</template>
import { LightningElement } from 'lwc'
export default HelloWorld extends LightningElement{
handleSubmit(){
console.log('IN SUBMIT');
}
handleSuccess(){
console.log('IN SUCCESS');
}
handleError(){
console.log('IN ERROR');
}
}
I trust this proves beneficial!