Close Quick Action from Lightning Web Components

Lightning Web Components are not supported as Quick Action. But we can use them with Lightning Component to overcome this. But issue come if we want to close Quick Action Modal from Lightning Web Components (LWC). Today we will cover how we can close the Quick Action Modal from Lightning Web Components.
For the demo purpose I will create a simple Lightning Web Components and pass event into parent Lightning component. From Lightning component we will call the $A.get("e.force:closeQuickAction").fire(); to close the Quick Action.
This is how our final output will look like:

Close Quick Action Modal from Lightning Web Components

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 parent component we don’t need the pub sub module here. We have also passed current record id from lightning component which we can use to do our further processing. We can use this to give user edit form using Lightning Web Components data service.
Now we will check the Lightning Component code:

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 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.

Start the development on Open Source Lightning Web Components here.

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

Advertisements

One thought on “Close Quick Action from Lightning Web Components

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.