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