How to programmatically close LWC Screen Quick Action from JS

Hello Trailblazers! In this post, I will show you how to close the Lightning web component Screen Action programmatically from the JavaScript controller.

Once you have created an LWC component for Action Screen, follow the below steps to close it programmatically:

1. Import the CloseActionScreenEvent into your component.
   
   

   import { CloseActionScreenEvent } from 'lightning/actions';
   

   
   
2. Call the event from wherever you want to close the action.
   
   

   closeAction(){
     this.dispatchEvent(new CloseActionScreenEvent());
   }
   

   
   
3. If you want to know how to do it from scratch see the code below.

LWC Screen Action example with code

I have created a sample LWC screen action to update two fields on the account.

Please note if you have to only update fields by prepopulating values or taking input from the user and there is no complex logic then you can use the standard actions as well. 

I have created this component just to show how you can close the action from JS. If you are not able to do something with standard actions or flows then only you should go with the LWC component.

lwcScreenAction.js

import { LightningElement, api } from "lwc";
import { CloseActionScreenEvent } from "lightning/actions";
export default class LwcScreenAction extends LightningElement {
    @api recordId;

    closeAction() {
        this.dispatchEvent(new CloseActionScreenEvent());
    }
}

 

lwcScreenAction.html

<template>
    <div class="slds-var-p-around_small">
        <lightning-record-edit-form id="recordViewForm" record-id={recordId} object-api-name="Account">
            <lightning-messages></lightning-messages>
            <lightning-input-field field-name="Name"></lightning-input-field>
            <lightning-input-field field-name="Website"></lightning-input-field>
            <!-- submit -->
            <lightning-button class="slds-var-p-around_x-small" label="Cancel" onclick={closeAction}></lightning-button>
            <lightning-button class="slds-var-p-around_x-small" type="submit" label="Update account" variant="brand">
            </lightning-button>
        </lightning-record-edit-form>
    </div>
</template>

lwcScreenAction.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>ScreenAction</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Check my other posts

Lightning Web Component Headless Quick Action

All posts on Lightning Web Component