How to use createRecord in LWC?
You might come across a common requirement which is attempting to create a record using an LDS method.
It's not suggested to use this approach straight away, try to use one of the LDS tags to create a record. If the requirement needs a bit of customization only then rely on using this method which is createRecord
.
Here is the sample code that we can use to create a record using the LDS method (which is createRecord()).
import { LightningElement } from "lwc";
//1. Import the method "createRecord" which is a named import
import { createRecord } from "lightning/uiRecordApi";
//2. Import the reference to Object and Fields
import ACCOUNT_OBJECT from "@salesforce/schema/Account";
import NAME_FIELD from "@salesforce/schema/Account.Name";
import INDUSTRY_FIELD from "@salesforce/schema/Account.Industry";
import RATING_FIELD from "@salesforce/schema/Account.Rating";
export default class ExploreCreateRecord extends LightningElement {
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() {
//3. Map the data to the fields
const fields = {};
fields[NAME_FIELD.fieldApiName] = this.name;
fields[INDUSTRY_FIELD.fieldApiName] = this.industry;
fields[RATING_FIELD.fieldApiName] = this.rating;
//4. Prepare config object with object and field API names
const recordInput = {
apiName: ACCOUNT_OBJECT.objectApiName,
fields: fields
};
//5. Invoke createRecord by passing the config object
createRecord(recordInput).then((record) => {
console.log(record);
});
}
}
exploreCreateRecord.js
This is the template file used to capture the user input so that it can be used in creating a record.
<template>
<lightning-input
name="name"
value={name}
onchange={handleChange}
></lightning-input>
<lightning-input
name="rating"
value={rating}
onchange={handleChange}
></lightning-input>
<lightning-input
name="industry"
value={industry}
onchange={handleChange}
></lightning-input>
<lightning-button label="Create" onclick={handleClick}></lightning-button>
</template>
exploreCreateRecord.html
Hope this helps!
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.