Mastering Lightning Web Components: Programmatic Record Updates in Salesforce LWC

Updating records in Salesforce Lightning Web Components (LWC) can be handled automatically using <lightning-record-edit-form> or programmatically using the updateRecord wire adapter method from lightning/uiRecordApi. In this guide, we will examine both approaches and demonstrate how to use updateRecord programmatically in custom JavaScript logic.

In plain words: While <lightning-record-edit-form> updates records automatically without needing JavaScript, calling updateRecord({ fields }) programmatically from lightning/uiRecordApi gives you complete JavaScript control over field processing, validation, and toast feedback.

Prerequisites

• Salesforce Developer Environment: An active Developer Org, Sandbox, or Scratch Org.
• Salesforce CLI & VS Code: Modern Salesforce developer tooling installed locally.
• Foundational LWC Knowledge: Understanding reactive properties and User Interface API modules.

Approach 1: Automatic Form-Based Updates

If you only need a standard edit form UI, <lightning-record-edit-form> handles record loading, field rendering, and saving out of the box without requiring manual callouts in JavaScript:

<template>
    <lightning-card title="Standard Form Edit" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <lightning-record-edit-form 
                object-api-name="Account" 
                record-id={recordId}>
                <lightning-messages></lightning-messages>
                <lightning-input-field field-name="Name"></lightning-input-field>
                <lightning-input-field field-name="Phone"></lightning-input-field>
                <lightning-button class="slds-m-top_small" variant="brand" type="submit" label="Save Record"></lightning-button>
            </lightning-record-edit-form>
        </div>
    </lightning-card>
</template>

Approach 2: Programmatic updates with updateRecord

When creating custom input components, data tables, or custom validation flows, use the updateRecord function from lightning/uiRecordApi.

Step 1: HTML Template (updateRecordComponent.html)

<template>
    <lightning-card title="Programmatic Record Update" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <lightning-input 
                label="Account Name" 
                value={accountName} 
                onchange={handleNameChange}>
            </lightning-input>
            
            <lightning-button 
                class="slds-m-top_small" 
                variant="brand" 
                label="Update Account" 
                onclick={handleSave}>
            </lightning-button>
        </div>
    </lightning-card>
</template>

Step 2: JavaScript Controller (updateRecordComponent.js)

import { LightningElement, api } from 'lwc';
import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ID_FIELD from '@salesforce/schema/Account.Id';
import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class UpdateRecordComponent extends LightningElement {
    @api recordId;
    accountName = '';

    handleNameChange(event) {
        this.accountName = event.target.value;
    }

    handleSave() {
        // Construct the fields object using field references and the Record Id
        const fields = {};
        fields[ID_FIELD.fieldApiName] = this.recordId;
        fields[NAME_FIELD.fieldApiName] = this.accountName;

        const recordInput = { fields };

        updateRecord(recordInput)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Account updated successfully!',
                        variant: 'success'
                    })
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error updating record',
                        message: error.body ? error.body.message : error.message,
                        variant: 'error'
                    })
                );
            });
    }
}

Common Developer Mistake: Passing form submit events directly into updateRecord({ fields: event.detail.fields }). The updateRecord API expects an object containing a fields key whose values include the record Id alongside schema field API names.

Always import field definitions from @salesforce/schema/Object.Field rather than hardcoding string names to maintain dependency tracking and prevent runtime errors during object schema updates.

Step 3: Component Metadata Configuration

Ensure your component targets allow embedding on Record Pages (updateRecordComponent.js-meta.xml):

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Testing and Verification

• Deploy the component to your org using sf project deploy start.
• Add c-update-record-component to an Account Record Page via Lightning App Builder.
• Enter a new value in the input field and click Update Account to verify the UI API callout and toast notification.

Conclusion

The Lightning User Interface API provides flexible tools for record mutation. Choose <lightning-record-edit-form> for standard out-of-the-box form views, or leverage programmatic updateRecord calls when building custom UI behaviors in Lightning Web Components.