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.

Subscribe to Salesforce Casts

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe
.myButton { box-shadow: 0px 10px 14px -7px #cf866c; background-color:#7b00a8; border-radius:4px; border:1px solid #942911; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:13px; font-weight:bold; padding:15px 74px; text-decoration:none; text-shadow:0px 1px 0px #854629; } .myButton:hover { background-color:#bc3315; } .myButton:active { position:relative; top:1px; }