Dec 18, 2016

Sujesh Ramachandran

How to get most out of Lightning Component Action?

Here is a blog talks about configuration and how to create actions which appears under detail page of a record to show custom lightning component. Lets see how to configure a lightning component as lightning component action. You can add Lightning component actions to an object’s page layout using the page layout editor. If you have Lightning component actions in your org, you can find them in the Salesforce1 & Lightning Actions category in the page layout editor’s palette. On Lightning Experience record pages, Lightning component actions display in the page-level action menu in the highlights panel.

Lightning component actions can’t call just any Lightning component in your org. For a component to work as a Lightning component action, it has to be configured specifically for that purpose and implement either the force:LightningQuickAction or force:LightningQuickActionWithoutHeader interfaces.

Lets see how to create a lightning component and configure as lightning component action. Now lets create a lightning component "CustomLightningAction.cmp", you could see that the component implements an interface force:LightningQuickAction so that the lightning component will be available to select while creating a action under object setting. Below is the sample code to create a lightning component for lightning component action. In the below component there is a "ShowToast" and "Close" button. On click of showToast, we could easily show toat with the standard events, similarly on click of 'Close' to close the popup, lightning provide close quick action events to close the popup from our end.

Now lets create a lightning component action and configure in Account object. For this :

1) Go to Buttons, Links, and Actions Section under the Account Object Setting Page(Settings - Edit Object)

2) New Action and create a lightning component action as below

Lets see the output now:

Lets see now how the above compoent looks like in case implemented from force:lightningQuickActionWithoutHeader. In this case, the header has to be programaticaly build from our end. Here is the updated code of 'CustomLightningAction.cmp' without header.

Now lets see how the component looks like in case of no standard header.

Follow me @ramsujesh

Sujesh Ramachandran

About Sujesh Ramachandran -

Co-Founder @ Fingertipplus Technologies | Co-Organizer of Coimbatore Salesforce Developer Group | Full Stack Coder | Blogger

Subscribe to this Blog via Email :


Write comments
Maheshkumar S
June 13, 2017 8:18 AM delete

Hi Sujesh

Is there a way to include buttons in model header & footer?

June 15, 2017 6:11 AM delete

yes, you could add the button in the header and footer section.

Please check the below link for the detailed code:

Oliver Jones
April 22, 2018 2:57 AM delete

You actually make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand. It seems too complex and very broad for me. I am looking forward for your next post, I will try to get the hang of it! msn hotmail sign in