Close Quick Action from Lightning Web Components

Lightning Web Components are not supported in Quick Action. But we can encapsulate them in lightning components to overcome this. But the issue comes if we want to close Quick Action Modal from Lightning Web Components (LWC). As we don’t have native support here so we will use a quick hack here. Today we will cover how we can close the Quick Action Modal from Lightning Web Components.
For the demo purpose, I will create simple Lightning Web Components. We will call the event into the parent Lightning component. From the parent Lightning component, we will call the standard method $A.get("e.force:closeQuickAction").fire(); to close the Quick Action Modal.

This is how our final output will look. As you can see first LWC component is loading and when we click the close the button we are closing the Quick Action. There is no delay here so the user will not notice any difference here.

So now we will view our code:

lwcQA.html

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Close Quick Action From Lightning Web Components
        </h3>
        <div slot="footer">

        </div>
        Record Id from Parent Component: {recordId}
        <br/>
        <lightning-button label="Close Quick Action" onclick={closeQuickAction}></lightning-button>
    </lightning-card>
</template>

lwcQA.js

import { LightningElement, api } from 'lwc';

export default class LwcQA extends LightningElement {

    @api recordId;
    closeQuickAction() {
        const closeQA = new CustomEvent('close');
        // Dispatches the event.
        this.dispatchEvent(closeQA);
    }
}

As we are calling event and passing data to the parent component we don’t need the pub sub module here. We have also passed the current record id from the lightning component which we can use to do our further processing. We can use this to give user edit form using the Lightning Web Components data service.
Now we will check the Parent Lightning Component code. Here we just creating one method to close the Quick Action modal.

QA_LC.cmp

<aura:component implements = "force:lightningQuickAction, force:hasRecordId" >
	<c:lwcQA recordId="{!v.recordId}" onclose="{!c.closeQA}"/>
</aura:component>

QA_LC.js

({
	closeQA : function(component, event, helper) {
		$A.get("e.force:closeQuickAction").fire();
	}
})

So with just a few lines of code, we can now use Lightning Web Components(LWC) inside Quick Action(QA) and easily close the Modal after the processing.
You can find complete code on my GitHub repo.

Did you like the post or do you have any questions, let me know in comments. Happy Programming 🙂