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

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

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

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

Lightning Action


  • 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

  • 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

  • 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

Result : 

Lightning Action

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 !! 🙂


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: 


Leave a Reply