Use updateRecord in LWC Salesforce

by Rijwan Mohmmed
0 comment

Hello folks, today we will discuss How to use updateRecord in LWC Salesforce. We use this for updates a record. Provide the record Id of the record to update in recordInput. Here we will create a simple form in which there will be two fields. A update for the call method for updating the account record.

Also check this: Navigate to Aura Component from LWC

Key Highlights:

  • Import updateRecord.
  • We don’t use the Apex method here.
  • These are UI APIs of LWC.

Syntax :

import { updateRecord } from 'lightning/uiRecordApi';
updateRecord(recordInput: Record, clientOptions?: Object): Promise<Record>

Code :

AccountDataController.cls :

public class AccountDataController {

    public static Account getSingleAccount() {
        return [
            SELECT Id, Name, Phone, Rating, AccountNumber
            FROM Account
            LIMIT 1

updateRecordLWC.HTML :

	<lightning-card title="Use updateRecord in LWC Salesforce/ LDS Update Record" icon-name="standard:record">
		<template if:true={showLoading}>
			<lightning-spinner alternative-text="Loading" size="medium" class="spinnerClass"></lightning-spinner>
		<div class="slds-m-around_medium">
			<template if:true={}>
				<lightning-input label="Id" disabled value={}></lightning-input>
				<lightning-input label="Name" value={} data-field="Name" onchange={handleChange}
					class="slds-m-bottom_x-small" required></lightning-input>
				<lightning-input label="Rating" value={} data-field="Rating" onchange={handleChange}
				<lightning-button label="Update Account" variant="brand" onclick={handleUpdate} disabled={disabled}>
			<template if:true={account.error}>
				<!-- handle Apex error -->


import { LightningElement, track, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { updateRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import getSingleAccount from '@salesforce/apex/AccountDataController.getSingleAccount';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import RATING_FIELD from '@salesforce/schema/Account.Rating';
import ID_FIELD from '@salesforce/schema/Account.Id';

export default class UpdateRecordLWC extends LightningElement {
    disabled = false;
    @track error;
    @track showLoading = false;


    handleChange(event) {
        // Display field-level errors and disable button if a name field is empty.
        if (! {
            this.disabled = true;
        else {
            this.disabled = false;

    handleUpdate() {
        const allValid = [...this.template.querySelectorAll('lightning-input')]
            .reduce((validSoFar, inputFields) => {
                return validSoFar && inputFields.checkValidity();
            }, true);

        if (allValid) {
            this.showLoading = true;
            // Create the recordInput object
            const fields = {};
            fields[ID_FIELD.fieldApiName] =;
            fields[NAME_FIELD.fieldApiName] = this.template.querySelector("[data-field='Name']").value;
            fields[RATING_FIELD.fieldApiName] = this.template.querySelector("[data-field='Rating']").value;

            const recordInput = { fields };

                .then(() => {
                    this.showToast('Success!!', 'Account updated successfully!!', 'success', 'dismissable');
                    // Display fresh data in the form
                    this.showLoading = false;
                    return refreshApex(this.account);
                .catch(error => {
                    this.showLoading = false;
                    this.showToast('Error!!', error.body.message, 'error', 'dismissable');
        else {
            // The form is not valid
            this.showToast('Error!!', 'Check your input and try again.', 'error', 'dismissable');

    showToast(title, message, variant, mode) {
        const evt = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
            mode: mode


<?xml version="1.0"?>
<LightningComponentBundle xmlns="">

Output :



1. updateRecord

You may also like

Leave a Comment