Lighting Web Component

How to use updateRecord in LWC?

Let's look at how to use updateRecord in LWC to update to a record.

Teja

17 Feb 2021 • 1 min read

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.

JavaScript for LWC