Handle the X close button event in Lightning quick action modal

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 aura:component tag includes a destroy 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>

view raw convertLead.cmp hosted with ❤ by GitHub

	({
	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);
	}
	})

view raw convertLeadController.js hosted with ❤ by GitHub

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.