Aura.Action attributes in Lightning


<apex:component >
    <aura:attribute name="onClick" type="Aura.Action" >
</apex:component >

An Aura.Action is a reference to an action in the framework. If a child component has an Aura.Action attributes, a parent component can pass in an action handler when it instantiates the child component in its.

Aura.Action is used pass a controller action from a parent component to child component that it contains and is used for on* handlers like onClick.

Limitations for Aura.Action attributes –

Although Aura.Action works for passing an action handler to a child component, its recommend registering an event in the child component and firing the event in the child’s controller instead.Then, handle the event in the parent component.

  • Don’t use cmp.set() in JavaScript code to reset an attribute of  type=”Aura.Action” after it’s previously been set. Doing so generates an error.
  • Don’t use $A.enqueueAction() in the child component to enqueue the action passed to the Aura.Action attribute.

Demonstration –

  1. Create a child component, which contain the Aura.Action attribute type.
  2. Child component also have a on* action handler like onClick.
  3. aura:attribute name should be same as expression inside the onclick action

childAction.cmp –


<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="childAction" type="Aura.Action"/>

    <lightning:button label="Execute Aura.Action" onclick="{!v.childAction}"/>
</aura:component >

  1. Embed the child component in Parent and pass the Aura.Action attribute name here to call the ParentComponent controller.
  2. Define the Controller of the parent component.

parentAction.cmp


<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
     <c:Child childAction="{!c.parentAction}"/ >
</aura:component>

parentActionController.js


({
 parentAction : function(component, event, helper) {
    alert('Aura.Action Parent Compoentnt');
}
})

AuraAction.app


<aura:application extends="force:slds" >
    <c:parentAction/>
</aura:application >

 Instead of an Aura.Action attribute, you could use <aura:registerEvent> to register an onclick event in the child component. You’d have to define the event and create an action in the child’s controller to fire the event. This event-based approach requires a few extra steps but it’s more in line with standard practices for communicating between components.

 Next1 Click here for using aura:registerEvent over Aura.Action attribute

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s