+ Start a Discussion
James Kacerguis 5James Kacerguis 5 

Cannot get quickaction to close after clicking lightning component quick action

Hello All,
I'm extremely new to lightning components and trying to replace some of our custom javascript buttons with lightning compatible options.  One button takes ownership of a lead.  I found a post that does something similar for cases and tried to modify it for my purpose: https://learnownlightning.blogspot.com/2018/01/change-owner-update-record-using.html

It seems to be doing the record update based on apex code, but it launches a quickaction screen with a cancel button that doens't go away.  I've seen it posted that you can use 
$A.get("e.force:closeQuickAction").fire();
It is not working for me.  I'm not sure if I'm not puting that code in the right place but I'm hoping someone can help me figure out a way to click the quick action button, have the lead change ownership, and that's it.

Here is my code so far:
Component:
<aura:component implements="force:lightningQuickAction,force:hasRecordId" controller="LightningComponent_MoveToMarketing" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>    
</aura:component>
Controller:
({
 doInit : function(component, event, helper) {
        var leadId = component.get("v.recordId");
        var action = component.get("c.changeOwnerMethod");
        action.setParams({
            leadId : leadId
        });
        action.setCallback(this, function(response) {
            if(response.getState() === "SUCCESS") {
                console.log("Lead Owner Changed To Current login User");
             var rec = response.getReturnValue();
             console.log(rec.OwnerId);
            }
        });
        $A.enqueueAction(action);
$A.get("e.force:closeQuickAction").fire();
        $A.get('e.force:refreshView').fire();
 }
})

Apex Class:
public class LightningComponent_MoveToMarketing {

    @AuraEnabled
    public static Lead changeOwnerMethod(Id leadId) {
        if(leadId != null) {
            Lead l = [SELECT OwnerId FROM Lead WHERE Id = :leadId];
         l.OwnerId = UserInfo.getUserId();
//update case Ownerid with loggedin userid.
            update l;
            return l;
        }
        return null;
    }

}

Any ideas?
 
Best Answer chosen by James Kacerguis 5
lnallurilnalluri
Move 
$A.get("e.force:closeQuickAction").fire();
        $A.get('e.force:refreshView').fire();

inside the callback function. It should be good then.

Your controller should be like this.
({
 doInit : function(component, event, helper) {
        var leadId = component.get("v.recordId");
        var action = component.get("c.changeOwnerMethod");
        action.setParams({
            leadId : leadId
        });
        action.setCallback(this, function(response) {
            if(response.getState() === "SUCCESS") {
                console.log("Lead Owner Changed To Current login User");
             var rec = response.getReturnValue();
             console.log('->'+rec.OwnerId);
                $A.get("e.force:closeQuickAction").fire();
        $A.get('e.force:refreshView').fire();
            }
        });
        $A.enqueueAction(action);

 }
})

Please mark it solved if this is working for you.

Thanks.​​​​​​​

All Answers

lnallurilnalluri
Move 
$A.get("e.force:closeQuickAction").fire();
        $A.get('e.force:refreshView').fire();

inside the callback function. It should be good then.

Your controller should be like this.
({
 doInit : function(component, event, helper) {
        var leadId = component.get("v.recordId");
        var action = component.get("c.changeOwnerMethod");
        action.setParams({
            leadId : leadId
        });
        action.setCallback(this, function(response) {
            if(response.getState() === "SUCCESS") {
                console.log("Lead Owner Changed To Current login User");
             var rec = response.getReturnValue();
             console.log('->'+rec.OwnerId);
                $A.get("e.force:closeQuickAction").fire();
        $A.get('e.force:refreshView').fire();
            }
        });
        $A.enqueueAction(action);

 }
})

Please mark it solved if this is working for you.

Thanks.​​​​​​​
This was selected as the best answer
James Kacerguis 5James Kacerguis 5
Awesome, that worked!  Could you clarify exactly which statement is running that apex code?  E.G. is it the $A.enqueueAction(action);?  If so, what is the $A?

What I'm thinking would be more useful than just closing the quick action window would be displaying a notificaiton that the lead was was reassigned and then closing.  Is there a way to set a timeout value of a few seconds and then closing?  Would that be done in the setCallback function area?

Thanks again!
lnallurilnalluri
@James. You are welcome.

Yes $A.enqueueAction(action) is running apex.

$A.enqueueAction(action) sends the request to server. More precisely, it adds the call to the queue of asynchronous server calls. That queue is an optimization feature of Lightning.

Also, to display the notification check and try replacing your controller code with below snippet.
 
 
({
    doInit : function(component, event, helper) {
        var leadId = component.get("v.recordId");
        var action = component.get("c.changeOwnerMethod");
        action.setParams({
            leadId : leadId
        });
        action.setCallback(this, function(response) {
            if(response.getState() === "SUCCESS") {
                console.log("Lead Owner Changed To Current login User");
                var rec = response.getReturnValue();
                console.log('->'+rec.OwnerId);
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    "title": "Success!",
                    "message": "The record has been assigned successfully.",
                    "type" : "success"
                });
                
                toastEvent.fire();
                setTimeout(function(){ 
                    $A.get("e.force:closeQuickAction").fire();
                $A.get('e.force:refreshView').fire();
                },3000);
            }
        });
        $A.enqueueAction(action);
        
    }
})

 
James Kacerguis 5James Kacerguis 5
Perfect, thank you.  Just to double check, there is no way to have the quick action not display at all and ONLY display the toast message, is there?
lnallurilnalluri
@james. I think it's not possible for a quick action. 
James Kacerguis 5James Kacerguis 5
Okay, do you have any better suggestion for making something like this happen with a button click in lightning?  E.G. a user driven action that triggers some apex and doesn't need any other user input?  
lnallurilnalluri
@James, If you dont want it as quick action.. make the following changes to your component.
 
<aura:component implements="force:lightningQuickAction,force:hasRecordId,flexipage:availableForAllPageTypes" controller="LightningComponent_MoveToMarketing" access="global" >
    <aura:attribute name="buttonName" type="String" default="Assign"/>
    <div align="center">
    <h1 style="font-weight:bold">Owner Assignment</h1>
    </div>
    <lightning:button label="{!v.buttonName}" aura:id="assignmentButton" onclick="{!c.doInit}"/>    
</aura:component>

controller.js
 
({
    doInit : function(component, event, helper) {
        var leadId = component.get("v.recordId");
        var action = component.get("c.changeOwnerMethod");
        action.setParams({
            leadId : leadId
        });
        action.setCallback(this, function(response) {
            if(response.getState() === "SUCCESS") {
                console.log("Lead Owner Changed To Current login User");
                var rec = response.getReturnValue();
                console.log('->'+rec.OwnerId);
                component.set("v.buttonName","Assigned");
                component.find("assignmentButton").set("v.disabled",true);
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    "title": "Success!",
                    "message": "The record has been assigned successfully.",
                    "type" : "success"
                });
                
                toastEvent.fire();
                setTimeout(function(){ 
                    $A.get("e.force:closeQuickAction").fire();
                $A.get('e.force:refreshView').fire();
                },3000);
            }
        });
        $A.enqueueAction(action);
        
    }
})

then go back to your lead page and edit it, search for your component name in the component list on the left side drag it and drop into the flexi page whereever you want.

User-added image


It should look something like

User-added image


Here by implementing the interface flexipage:availableForAllPageTypes in your component, it is available to drop it on flexipage.


Let me know if you have any other questions.


Thanks.




​​
lnallurilnalluri
@James Also, in this case you may not need $A.get("e.force:closeQuickAction").fire(); and timeout.
James Kacerguis 5James Kacerguis 5
Yes, this is great and I removed the closeQuickAction and timeout and it will works as expected.  One more question though, is there a way to get the button to display on a similar background to other components?  Currently is blank / transparent.  It would be great if it just looked like the dupolicate lead component :

User-added image
 
lnallurilnalluri
@James, yup by wrapping it into a card we can
 
<aura:component implements="force:lightningQuickAction,force:hasRecordId,flexipage:availableForAllPageTypes" controller="LightningComponent_MoveToMarketing" access="global" >
    <aura:attribute name="buttonName" type="String" default="Assign"/>
    
    
    <lightning:card>
        <aura:set attribute="title">
            <lightning:icon iconName="action:change_owner" size="xx-small"/>&nbsp;
            <strong>Owner Assignment</strong>
        </aura:set>
        <div align="center">
            <lightning:button variant="brand" label="{!v.buttonName}" aura:id="assignmentButton" onclick="{!c.doInit}"/>
        </div>
    </lightning:card>
</aura:component>

User-added image
James Kacerguis 5James Kacerguis 5
Awesome, exactly what I needed.  Thank you for all your help!
Sam JordanSam Jordan
Thanks Every One for Sharing this valuable info 

Regards : YRKKH Upcoming Story (https://serialstalk.com/yeh-rishta-kya-kehlata-hai-upcoming-story/ )
Akash Deb NathAkash Deb Nath
Hey, its really amazing blog I am very much interested. Thanks for the great article, Regards. Moviescounter (https://www.godigitalzone.in/moviescounter/)
 
python trainingpython training
Thanks for your excellent blog and giving great kind of information. So useful. Nice work keep it up thanks for sharing the knowledge. 3RI Technologies (https://www.3ritechnologies.com/course/python-programming-training-in-pune/)

 
Rahil ShanRahil Shan
Thanks for sharing this 
please check out this katmoviehd (https://moviesnotes.com/katmoviehd), 7starhd (http://moviesnotes.com/7starhd/), 9xmovies (http://moviesnotes.com/9xmovies), moviesflix (http://moviesnotes.com/moviesflix/), downloadhub (http://moviesnotes.com/downloadhub)
anuragh sharmaanuragh sharma
Thanks for sharing these awesome extensive information here. Relly very nice and important....
Download and Watch Hollywood South Hindi Dubbed
Hiren Patel 45Hiren Patel 45
Thank you lnalluri,
I have applied the code and it runs properly.
Grade Calculator (https://www.gradecalculator.tech/) and Password Generator (https://www.password-generator.tech) and Convert Decimal to Fraction (https://www.decimal-to-fraction.com/)
abhishek kumar 694abhishek kumar 694
Yes, this is great and I removed the closeQuickAction and timeout and it will works as expected. tamilrockers (https://tricksnhub.com/tamilrockers/)
Thanks Every One for Sharing this valuable info. Regards Movierulz (https://tricksnhub.com/movierulz/)
shaiva sharmashaiva sharma
Yes, this is great and I removed the closeQuickAction and timeout and it will works as expected. khabar bollywood (https://www.khabarsbollywood.com/)
 
Roger KartRoger Kart
I hope the answer provided above solved your problem. You can check this song and relax for a while. Duniya Se Tujhko Churake Dj Song Mp3 Download. (https://anylyricsguru.com/duniya-se-tujhko-churake-dj-song/)