How to Add Lightning Component as a Quick Action in Salesforce
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:
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
- After click on the New Action Button Fill all the details as shown in this screenshot. and click on the Save Button.
- 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
- 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.
- 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.
Result :
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:
Brahmaji Tammana
Name: Brahmaji Tammana
Email: [email protected]
Salesforce Associate
Post By Brahmaji :
- Spring 18 Lightning Components Features/Enhancement/Critical Updates – Highlights
- How To Detect a Device In Salesforce Lightning Component ?
- Powerful Lightning Datatable base component – Example Using Fieldset
- How to use design resource in Lightning Component ?
- Use Lightning Data Service – No To Apex Controller In Lightning Components
- Override Standard Buttons With Lightning Component – Lightning Experience
- Custom Record Type Selection Lightning Component with force:createRecord event
- How to Add Lightning Component as a Quick Action in Salesforce
- How to use SVG in Salesforce Lightning Component ?
- Work Fast With Keyboard Shortcuts in Salesforce Lightning Experience
21 comments
This step really work very quickly.. Thanks for providing pros and cons of quick action in Salesforce Lightning in this blog..
Thanks. Please share the info if you like, so that it will be helpful to others as well.
Hi Brahmaji,
Please let me know your contact number. I want to talk to you.
Thanks
I like the way you have described . It is easy to learn for beginners too.
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?
I tried this for Case Layout in lightning service console, somehow it is not visible
For case and Work Order this list view button will not work. Salesforce limitation
How to hide the default quick action panel?
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.
Thanks for sharing blog, its very useful. Keep sharing more with us.
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
Can we increase the width of this modal pop up?
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
hi,
Nice article, but can we do this same in record list page?
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
use $A.get(“e.force:closeQuickAction”).fire(); to close quick action popup