Use updateRecord in LWC Salesforce

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 {

    @AuraEnabled(cacheable=true)
    public static Account getSingleAccount() {
        return [
            SELECT Id, Name, Phone, Rating, AccountNumber
            FROM Account
            LIMIT 1
        ];
    }
}

updateRecordLWC.HTML :

<template>
	<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>
		</template>
		<div class="slds-m-around_medium">
			<template if:true={account.data}>
				<lightning-input label="Id" disabled value={account.data.Id}></lightning-input>
				<lightning-input label="Name" value={account.data.Name} data-field="Name" onchange={handleChange}
					class="slds-m-bottom_x-small" required></lightning-input>
				<lightning-input label="Rating" value={account.data.Rating} data-field="Rating" onchange={handleChange}
					class="slds-m-bottom_x-small"></lightning-input>
				<lightning-button label="Update Account" variant="brand" onclick={handleUpdate} disabled={disabled}>
				</lightning-button>
			</template>
			<template if:true={account.error}>
				<!-- handle Apex error -->
			</template>
		</div>
	</lightning-card>
</template>

updateRecordLWC.JS:

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;

    @wire(getSingleAccount)
    account;

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

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

        if (allValid) {
            this.showLoading = true;
            // Create the recordInput object
            const fields = {};
            fields[ID_FIELD.fieldApiName] = this.account.data.Id;
            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 };
            console.log(recordInput);

            updateRecord(recordInput)
                .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
        });
        this.dispatchEvent(evt);
    }
}

updateRecordLWC.JS-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>55.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference:

1. updateRecord