In Salesforce Lightning, quick actions are a powerful way to improve the user experience by allowing users to perform common tasks from a single location. However, one issue that can arise when using quick actions is that it can be difficult to handle the event when the user closes the quick action.
Thankfully, the Lightning framework provides a solution for this problem. The <strong>aura:component</strong> tag includes a <strong>destroy</strong> event that can be used to handle the X close button event. In the example below, the handleDestroy function is used to handle this event.
| <aura:component implements="force:hasRecordId,force:lightningQuickActionWithoutHeader" controller="SimpleServerSideController"> | |
| <aura:handler name="destroy" value="{!this}" action="{!c.handleDestroy}"/> | |
| <p>This is a aura component</p> | |
| </aura:component> |
| ({ | |
| handleDestroy : function (component, event, helper) { | |
| var val = event.getParam("value"); | |
| // Do something else here | |
| var action = component.get("c.clearData"); | |
| action.setParams({ | |
| recId : component.get("v.recordId") | |
| }); | |
| // Create a callback that is executed after | |
| // the server-side action returns | |
| action.setCallback(this, function(response) { | |
| var state = response.getState(); | |
| if (state === "SUCCESS") { | |
| // Alert the user with the value returned | |
| // from the server | |
| console.log("From server: " + response.getReturnValue()); | |
| // You would typically fire a event here to trigger | |
| // client-side notification that the server-side | |
| // action is complete | |
| } | |
| }); | |
| $A.enqueueAction(action); | |
| } | |
| }) |
In the example, the handleDestroy function is passed three parameters: the component, the event, and the helper. The event.getParam("value") method is used to get the value of the event. In this case, the value of the event is not important, so it is not used in the function.
Instead, the handleDestroy function is used to call an Apex controller method clearData to clear the data when the quick action is closed. The action.setParams method is used to set the parameters for the Apex controller method. In this case, the recId parameter is set to the recordId of the component.
The action.setCallback method is used to create a callback function that is executed after the server-side action returns. The callback function checks the state of the response and, if it is successful, it logs a message to the console.
In conclusion, handling the X close button event in a Lightning quick action is a simple process that can be accomplished using the aura:component tag’s destroy event and a callback function. This example demonstrates how to call an Apex controller method to clear data when the quick action is closed, but this event can be used for any action that needs to be performed when the quick action is closed.
About the blog
SFDCLessons is a blog where you can find various Salesforce tutorials and tips that we have written to help beginners and experienced developers alike. we also share my experience and knowledge on Salesforce best practices, troubleshooting, and optimization. Don’t forget to follow us on:
Newsletter
Subscribe to our email newsletter to be notified when a new post is published.
Can we stop the quick action panel from closing by handling this event? We want to prevent clousre of quick action modal if user has some unsaved changes.
THANK YOU!