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.
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:
Name: Brahmaji Tammana
Email: [email protected]
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