How to close a Global Quick Action Lightning Component popup?

I’m trying to build a Lightning Component Quick Action for Record Quick Action as well as Global Quick Action.

The component opens in a Modal popup in center of screen when in Record View and it opens in a popup along the bottom of the screen when called from Global Action menu (+) symbol in header.

To close the popup I’ve added following Event Call:

var dismissActionPanel = $A.get("e.force:closeQuickAction");
dismissActionPanel.fire();

This works for Record based Quick Action modal dialog and closes it, but it doesn’t do anything when called in Global Quick Action.

Here is my complete code for the Lightning Component:

testGlobalCmp.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionWithoutHeader" access="global" >
    <div class="slds-p-around--medium">
        <h2 class="slds-text-heading--medium" >Test Heading</h2>
    </div>
    <div class="slds-p-around--medium">
        Test content of module
    </div>
    <div class="slds-p-around--medium">
        <ui:button label="Cancel" 
                   class="slds-button slds-button--neutral cuf-publisherCancelButton uiButton"
                   press="{!c.cancelBtn}"/>
        <ui:button label="Save &amp; Close" 
                   class="slds-button slds-button--brand cuf-publisherShareButton uiButton"
                   press="{!c.saveAndCloseBtn}"/>
    </div>
</aura:component>

testGlobalCmpController.js

({
    cancelBtn : function(component, event, helper) {
        // Close the action panel
        var dismissActionPanel = $A.get("e.force:closeQuickAction");
        dismissActionPanel.fire();
    },
    saveAndCloseBtn : function(component, event, helper) {
        // Display the total in a "toast" status message
        var resultsToast = $A.get("e.force:showToast");
        resultsToast.setParams({
            "title": "Save Success!",
            "message": "A test save success toast!"
        });
        resultsToast.fire();
        // Close the action panel
        var dismissActionPanel = $A.get("e.force:closeQuickAction");
        dismissActionPanel.fire();
    }
})

And then I created a Quick Action in a object say Contactand also created a Global Quick Action and updated Publisher Layout to add the newly created quick actions to it.

Answer

Use $A.get("e.force:closeQuickAction").fire();inside your component controller at the necessary place. This line will close the modal box automatically.

Attribution
Source : Link , Question Author : VarunC , Answer Author : Aruna

Leave a Comment