Forcetrails: How to programmatically close LWC Screen Quick Action from JS

programmatically-close-lwc-quick-action


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



No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, reach email us at rahul@forcetrails.com