Aura.Action attribute in lighting component
Use Case 1 : We all know when we have to call a helper.js function inside other helper function of lightning component we simply use this.functionname to call the both functions in one go but suppose same thing we have to perform in controller.js file without taking help of helper.js file of component. So here Aura.Action attribute come into the picture. Let's understand this with a lightning component example.
AuraActionHandler.apxc
public class AuraActionHandler {
@AuraEnabled
public static List<Account> getAccount(){
return [Select Name,AccountNumber FROM Account limit 2];
}
@AuraEnabled
public static List<Contact> getContact(){
return [Select Name,Email FROM Contact limit 2];
}
}
AuraAction.cmp <aura:component controller="AuraActionHandler" implements="flexipage:availableForAllPageTypes" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doint}"/>
<aura:attribute name="getCon" type="Aura.Action" default="{!c.pullContact}"/>
<aura:attribute name="acclist" type="Account[]"/>
<aura:attribute name="conlist" type="Account[]"/>
<lightning:card title="Account List" iconName="standard:record">
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr>
<th scope="col">
<div class="slds-truncate" title="">Sr. No.</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Number">Account Number</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.acclist}" var="a" indexVar="icount">
<tr>
<td scope="row">
{!icount+1}
</td>
<td scope="row">
{!a.Name}
</td>
<td scope="row">
{!a.AccountNumber}
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</lightning:card>
<lightning:card title="Contact List" iconName="standard:record">
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr>
<th scope="col">
<div class="slds-truncate" title="">Sr. No.</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Name">Contact Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Type">Email</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.conlist}" var="c" indexVar="icount">
<tr>
<td scope="row">
{!icount+1}
</td>
<td scope="row">
{!c.Name}
</td>
<td scope="row">
{!c.Email}
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</lightning:card>
</aura:component>
AuraActionController.js ({
doint : function(component, event, helper) {
var action=component.get("c.getAccount");
action.setCallback(this,function(e){
if(e.getState()=='SUCCESS'){
var result=e.getReturnValue();
if(result!=null && result.length>0){
component.set("v.acclist",result);
}
else{
alert('No record return');
}
//Calling same controller action using Aura.Action attribute
$A.enqueueAction(component.get("v.getCon"));
}
});
$A.enqueueAction(action);
},
pullContact : function(component, event, helper) {
var action=component.get("c.getContact");
action.setCallback(this,function(e){
if(e.getState()=='SUCCESS'){
var result=e.getReturnValue();
if(result!=null && result.length>0){
component.set("v.conlist",result);
}
else{
alert('No record return');
}
}
});
$A.enqueueAction(action);
}
})
Output:
Use Case 2 : An Aura.Action attribute is used to pass controller action between components means if a child component has an Aura.Action attribute, a parent component can pass in an action handler when it instantiates the child component in its markup. Let's understand this second scenario with a lightning component example.
<aura:component>
<aura:attribute name="onclick" type="Aura.Action"/>
<p>Child component with Aura.Action attribute</p>
<lightning:button class="slds-button slds-button_brand"
label="Execute the passed action"
onclick="{!v.onclick}"/>
</aura:component>
Parent.cmp <aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<lightning:card title="Aura.Action Parent Child Communication" iconName="standard:connected_apps">
<p style="margin-left:10px;">
Parent component passes handler action to c:Child
<br/>
<c:Child onclick="{!c.parentAction}"/>
</p>
</lightning:card>
</aura:component>
ParentController.js ({
parentAction : function(component, event, helper) {
alert('Hi, I am alert from Parent Component');
}
})
When you click the button in c:Child, the parentAction action in the controller of c:Parent is executed.
Caution : 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.
Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.
0 Comments
Post a Comment