Update Record in LWC using updateRecord of uiRecordApi

by

In this post, we will implement the functionality to update records in LWC using updateRecord method from uiRecordApi module. Let’s just hop into the implementation.

Implementation

In this post, we will fetch the details of the Case record and display it using lightning-record-view-form. Then, we will have a Text box and a button to update the Subject of Case using updateRecord in LWC.

Update Record in LWC using updateRecord of uiRecordApi
Update Record in LWC using updateRecord of uiRecordApi

First, create a Lightning Web Component and use lightning-record-view-form to display the Case record details. Check this post to know how lightning-record-view-form works in Lightning Web Components. Then, add the Text box and Button to get the Subject from User to update.

updateRecord.html

<template>
    <lightning-layout>
        <lightning-layout-item size="6">
            <lightning-card title="Case Details using lightning-record-view-form">
                <div class="slds-m-around_medium">
        
                    <!-- To view record-->
                    <lightning-record-view-form object-api-name="Case" record-id={strCaseId}>
                        <lightning-output-field field-name="CaseNumber"></lightning-output-field>
                        <lightning-output-field field-name="Subject"></lightning-output-field>
                        <lightning-output-field field-name="AccountId"></lightning-output-field>
                        <lightning-output-field field-name="Description"></lightning-output-field>
                    </lightning-record-view-form>
                </div>
            </lightning-card>
        </lightning-layout-item>
        <lightning-layout-item size="6">
            <lightning-card title="Update Record in LWC">
                <div class="slds-m-around_medium">
                    <!-- To Update Record-->
                    <lightning-textarea label="Enter Subject to Update" data-field="Subject" 
                        class="slds-m-bottom_x-small"></lightning-textarea>
                    <lightning-button variant="brand" label="Update Case" onclick={updateCase} 
                        class="slds-m-left_x-small"></lightning-button>
                </div>
            </lightning-card>
        </lightning-layout-item>
    </lightning-layout>
</template>

Update Record in LWC

In JS Controller, we first need to import updateRecord from lightning/uiRecordApi module. Then, we need to import the Object Field Schema using @salesforce/schema/. We are hard-coding the Id of Case to display the Case record details.

udpateRecord() accepts two parameters:

  • recordInput: A RecordInput Object to update the record. Required.
  • clientOptions : Used to check the conflicts while updating a record. Optional.

udpateRecord in LWC returns Promise Object that resolves with the updated record. Call the updateRecord() and pass recordInput. If the update operation is successful, we are showing a Success Toast message. Check this post to know how to implement Toast messages in Lightning Web Components. If it fails, we are logging the error.

updateRecord.js

import { LightningElement, wire } from 'lwc';
import { updateRecord } from 'lightning/uiRecordApi';
import ID_FIELD from '@salesforce/schema/Case.Id';
import SUBJECT_FIELD from '@salesforce/schema/Case.Subject';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
const arrFields = ['Case.Subject'];
export default class UpdateRecord extends LightningElement {
    strCaseId = '5002x000007yAKDAA2';
    updateCase(){
        const fields = {};
        fields[ID_FIELD.fieldApiName] = this.strCaseId;
        fields[SUBJECT_FIELD.fieldApiName] = this.template.querySelector("[data-field='Subject']").value;
        const recordInput = { fields };
        updateRecord(recordInput)
        .then(() => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Case Updated',
                    variant: 'success'
                })
            );
        })
        .catch(error => {
            console.log(error);
        });
    }
}

That is all. This is how we can use Update Record in LWC using updateRecord of uiRecordApi module.

Please Subscribe here if you don’t want to miss new implementations.

If you find this post helpful, below are some hand-picked implementations for you:

Check official Salesforce documentation here to know more about updateRecord of uiRecordApi module.

Leave a Comment