How to use updateRecord in LWC?
Let's look at how to use updateRecord in LWC to update to a record.
Whenever you want to update a record you can use LDS methods which is updateRecord if the LDS tags are not of any help!
It's a method that we need to import from the package lightning/uiRecordApi
and invoke it by passing the appropriate config object.
How to use getRecord in LWC
Here is how we can put that to use!
import { api, LightningElement } from "lwc";
//1. Import reference to the Object and fields
import ACCOUNT_OBJECT from "@salesforce/schema/Account";
import ID_FIELD from "@salesforce/schema/Account.Id";
import NAME_FIELD from "@salesforce/schema/Account.Name";
import INDUSTRY_FIELD from "@salesforce/schema/Account.Industry";
import RATING_FIELD from "@salesforce/schema/Account.Rating";
//2. Import the named import updateRecord
import { updateRecord } from "lightning/uiRecordApi";
export default class ExploreUpdateRecord extends LightningElement {
//3. If I need to update a record then I should have access
// to the recordId(make sure you use the adaptor @api).
@api
recordId;
name;
industry;
rating;
handleChange(e) {
if (e.target.name === "name") {
//this is name input textbox
this.name = e.target.value;
console.log(this.name);
} else if (e.target.name === "industry") {
//this is industry input textbox
this.industry = e.target.value;
console.log(this.industry);
} else if (e.target.name === "rating") {
//this is rating input textbox
this.rating = e.target.value;
console.log(this.rating);
}
}
handleClick() {
//4. map the data to the fields
const fields = {};
fields[ID_FIELD.fieldApiName] = this.recordId;
fields[NAME_FIELD.fieldApiName] = this.name;
fields[INDUSTRY_FIELD.fieldApiName] = this.industry;
fields[RATING_FIELD.fieldApiName] = this.rating;
//5. Create a config object that had info about fields.
//Quick heads up here we are not providing Object API Name
const recordInput = {
fields: fields
};
//6. Invoke the method updateRecord()
updateRecord(recordInput).then((record) => {
console.log(record);
});
}
}
exploreUpdateRecord.js
How to use createRecord in LWC
Here is the template file!
<template>
<lightning-input
name="name"
value={name}
label="Account Name"
onchange={handleChange}
></lightning-input>
<lightning-input
name="rating"
value={rating}
label="Rating"
onchange={handleChange}
></lightning-input>
<lightning-input
name="industry"
value={industry}
label="Industry"
onchange={handleChange}
></lightning-input>
<lightning-button label="Create" onclick={handleClick}></lightning-button>
</template>
exploreUpdateRecord.html
Hope this was helpful!
💡
Grab your FREE course
I have put together a FREE course on JavaScript that helps you master Lightning Web Components.
It just takes 2 hours to finish the course and you will be able to feel the difference.