Call Approval Process on Button Click in Salesforce LWC

In some scenarios, we may need to call the standard approval process on click of a custom button. So in that case, we can have a lightning quick action in LWC similar to one in Aura components.

Step 1:

Create an action for an object. Lets say Opportunity. We need to specify the LWC component name. for create a LWC component and enter that name in Lightning Web Component field.

Step 2:

Add that action in the required page layout in the section as shown below:

So the configurations are done...

Step 3:

Let's do the code part

Open that already created LWC component and add this code.

LWC html file:

<template>

    <lightning-quick-action-panel header="Submit for Approval">

        <lightning-textarea label="Comments" value={comments} onchange={commentChange} 

                                class="textAreaBody">

        </lightning-textarea>

        <div slot="footer">

            <lightning-button variant="neutral" class="slds-m-left_x-small" label="Cancel" 

                                onclick={closeAction}>

            </lightning-button>

            <lightning-button variant="brand" class="slds-m-left_x-small" label="Submit" 

                                onclick={handleSubmitClick} >

            </lightning-button>

        </div>

    </lightning-quick-action-panel>

</template>

------------------------------------------------

LWC Js file:

import { LightningElement,wire,track,api } from 'lwc';

import submitApproval from '@salesforce/apex/OppApproval.submitApproval';

import { CloseActionScreenEvent } from "lightning/actions";

import { CurrentPageReference } from 'lightning/navigation';

export default class OppApprovalLWC extends LightningElement {

@track comments;

@api recordId;

closeAction() {

    this.dispatchEvent(new CloseActionScreenEvent());

    }

@wire(CurrentPageReference)

    getStateParameters(currentPageReference) {

        if (currentPageReference) {

            this.recordId = currentPageReference.state.recordId;

        }

    }

commentChange(event) {

        this.comments = event.detail.value;

    }

handleSubmitClick(event){

        submitApproval({ oppId: this.recordId, comments: this.comments})

        .then(result =>{

            eval("$A.get('e.force:refreshView').fire();");

            this.dispatchEvent(new CloseActionScreenEvent());

        })

        .catch(error =>{

            

        });

        

    }

}

-------------------------------------------------

LWC Meta XML file:

<?xml version="1.0"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>54.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__RecordAction</target>

    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__RecordAction">

        <actionType>ScreenAction</actionType>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

-------------------------------------------------

Apex Class:

public class OppApproval {

 @auraEnabled

    public static void submitApproval(String oppId,String comments){

        try{

            Approval.ProcessSubmitRequest approvalRequest = new Approval.ProcessSubmitRequest();                

            approvalRequest.setObjectId(OppId);

            approvalRequest.setComments(comments);

     approvalRequest.setSkipEntryCriteria(true);

                Approval.ProcessResult approvalResult = Approval.process(approvalRequest);

                if(approvalResult .isSuccess()){

                    system.debug('success-'+approvalResult .isSuccess());

                }

                else{

                    system.debug('failed-'+approvalResult .isSuccess());

                }

            

        }

        catch (Exception e) {

            

            String errorMsg = e.getMessage();

            throw new AuraHandledException(ErrorMsg);

        }

        

    }

}