Update Record Using Quick Action in LWC

ByPCGDesigner Sales Cloud

Create the LWC Component

To create quick action component we can use the  <lightning-quick-action-panel> feature. The <lightning-record-edit-form> option will allow the user to edit the data.

QuickAction.HTML:

&lt;template>
    &lt;lightning-quick-action-panel header="Edit Fields Action">
 
        &lt;lightning-record-edit-form record-id={recordId} 
object-api-name={objectApiName}onsuccess={handleSuccess}>
            &lt;lightning-input-field field-name="Name">&lt;/lightning-input-field>
            &lt;lightning-input-field field-name="MobilePhone
">&lt;/lightning-input-field>
&lt;lightning-input-field field-name="Email
">&lt;/lightning-input-field>
            &lt;lightning-input-field field-name="AccountId
">&lt;/lightning-input-field>
            &lt;lightning-button variant="neutral" label="Cancel" onclick={cancelAction}>&lt;/lightning-button>&amp;nbsp;
&lt;lightning-button variant="brand" label="Save" type="submit">&lt;/lightning-button>
        &lt;/lightning-record-edit-form>
    &lt;/lightning-quick-action-panel>
&lt;/template>

QuickAction.JS:

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { CloseActionScreenEvent } from 'lightning/actions';
 
export default class FormFill extends LightningElement {
   @api recordId;
   @api objectApiName;
 
   
handleSuccess(e) {
        this.dispatchEvent(new CloseActionScreenEvent());
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Contact Record Updated!',
                variant: 'success'
            })
        );
   }
 
cancelAction(){
      this.dispatchEvent(new CloseActionScreenEvent());
   }
 
}

QuickAction.Meta.Xml:

&lt;?xml version="1.0"?>
&lt;LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    &lt;apiVersion>54.0&lt;/apiVersion>
    &lt;isExposed>true&lt;/isExposed>
    &lt;masterLabel>Quick Action In LWC&lt;/masterLabel>
    &lt;targets>
        &lt;target>lightning__RecordPage&lt;/target>
        &lt;target>lightning__AppPage&lt;/target>
        &lt;target>lightning__HomePage&lt;/target>
        &lt;target>lightning__Tab&lt;/target>
        &lt;target>lightning__RecordAction&lt;/target>
       
    &lt;/targets>
    &lt;targetConfigs>
        &lt;targetConfig targets="lightning__RecordAction">
            &lt;actionType>ScreenAction&lt;/actionType>
        &lt;/targetConfig>
    &lt;/targetConfigs>
&lt;/LightningComponentBundle>

Create a Action on target object

Go to Contact Object:  Object Manager => Contact  => Button, Links, and Actions.

  • Create a new Action

  • Add the action button into the page layout on mobile & lightning actions section.

  • Go to  target object record you will notice that the action button were created.

  • Now we are able to update the record.