lightning Action

How to Add Lightning Component as a Quick Action in Salesforce

Admin Configuration, Salesforce1/Lightning Experience

Hi Ohana,

In this post we are going to discuss on how to add a Lightning component as a Custom Quick Action or Lightning Actions in Salesforce Lightning Experience.

What is the Quick Actions or Lightning Actions?

Quick Action/Lightning Actions is an Object-specific action. Object-specific actions let users create records that have automatic relationships to other records, make updates to specific records, and interact with records in ways that you define.

Lightning actions are built on the existing salesforce Lightning Component Framework that you may already have adopted. So you can easily convert your existing Lightning components to actions and use them in Lightning Experience and Salesforce1 Application.

Prerequisites : basic understanding of Lightning Component.
Permission to User : Customize Application

If you haven’t created any lightning component yet, create the below component for this use case.

Lightning Component – QuickAddDemo.cmp
<aura:component implements="force:lightningQuickAction"> 
   <center><b>This is a Lightning component </b></center>
</aura:component>

To display a lighting component as a Quick action to an object, It must be implemented with force:lightningQuickAction OR force:lightningQuickActionWithoutHeader.

if you want to display standard header with save and cancel buttons on the Lightning Action Overlay Popup Modal then use force:lightningQuickAction otherwise Use force:lightningQuickActionWithoutHeader. 

Difference between these 2 interfaces has shown below:

Lightning Action sfdcmonkey.com

Steps to Add Lighting component as a Quick Action to an object :

Go to Setup >> Objects and Fields >>Object Manager >> Select the Object ( let’s take Contact for this example ) >> Go to Buttons, Links and Actions section >> Click on New Action

 

Lightning Action sfdcmonkey.com

  • After click on the New Action Button Fill all the details as shown in this screenshot. and click on the Save Button.

Lightning Action sfdcmonkey.com

 

  • We are done with Quick Action creation part. Now we have to map this action in page layout to display in the UI.
Steps to Add Quick Action to Object Page Layout :

Go to Setup >> Objects and Fields >>Object Manager >> Select the Object ( let’s take Contact for this example ) >> Go to Page Layouts section >> Select the Page Layout where you want to display [Quick Add Demo] Action

Lightning Action sfdcmonkey.com

  • After select the layout .. Go to Salesforce1 and Lightning Experience Actions section and if you do not see your actions, click on Override predefined action hyperlink
    Map the lightning action from Layout editor to the Layout page as shown in this image. and click on the save button.

Lightning Action sfdcmonkey.com

  • Now we able to access the lighting component as a quick action from contact’s record. Let’s check it 😉

Go to Contacts >> Select a record >> Click on the actions dropdown >> Select your Quick Action/Lightning Action which have use Lightning Component. 

Lightning Action sfdcmonkey.com

Result : 

Lightning Action sfdcmonkey.com

Hooray !!. Our lightning component is popped up now.

Thing keep in Mind :
  • As you can see the component is wrapped in a popup with system provided Cancel button and header. However we have not added these things in the component, then why is it showing here?

the reason is simple, we have implemented an interface force:lightningQuickAction to the component and it did everything.

  • Components that implement the force:lightningQuickActionWithoutHeader interface display in a panel without additional controls and are expected to provide a complete user interface for the action.
  • We cannot add both force:lightningQuickAction and force:lightningQuickActionWithoutHeader action to a single lightning component.
  • We cannot add lightning application as a quick action.

That’s it folks. Happy reading !! 🙂

Resources:

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference. ?

if you have any suggestions or issue with it, you can post in comment box 🙂

About The contributor: 

21 comments

  • Hello Brahmaji Tammana ,

    I am new in lightning and working on lightning project. I am stuck in a requirement where i need to pre populate some field on custom component. That component is invoke from a standard New button. I want to prepopulate parent field auto when this new button hit from related list of parent object. I didn’t find any good article on this till now. It will be a great help if you provide some suggestion in this.

     

     

    Thanks

    Dilip

     

  • Hi Brahmaji,

    I’m stuck in a requirement where I want my Quick Action to be launched only when I’ve certain Picklist Value in my Field. How can we achieve this?

  • Hi,

    How can we do in the “force:lightningQuickActionWithoutHeader”case to fit the entire windows? When preview a simple inetgartion, they’re always margins.

    Any idea or any example?

    Thank you.

  • Hi Brahmaji,

    could u please suggest me a way to invoke quick action from button added on to lightning component? Your help will be appreciated

     

  • For Cases and Work Order it is possible to view quick action. But the thing is it appears in a different place, try to search in feeds. I hope it would be helpful for others too.

     

     

  • We have developed a lighting component, wich offer the users a Wizard to create Assets. When adding this component to the action in the Asset tab (drop down in Tab and select New), it is not starting the wizard (no errors).

    The New button on the page itself is working fine, so it seems nothing is wrong with the component.

    Is there a way to solve this?

     

    Thanks,

    Johan

  • How to hide the popup after clicking of a button in lightning:quick action.Could you please get back to me with a reply.

    Thanks&Regards

    Brahmanaidu

    8885860216

Leave a Reply