In this blog, I am going to explain how to use the aura: method which allows you to directly call a method in a component’s client-side controller instead of firing and handling a component event.Here is the simple component “AuraMethod” which contains method “defaultParamers” with the action called loadDefaultParams.
<aura:component>
<aura:handler name ="init" value="{!this}" action="{!c.doInit}"/>
<aura:method name="defaultParamers" action="{!c.loadDefaultParams}">
<aura:attribute type="String" name="header" default="Salesforce Header" />
<aura:attribute type="String" name="footer" default="Salesforce Footer" />
<aura:attribute type="String" name="title" default="Salesforce" />
</aura:method>
</aura:component>
In the component controller doInit method I am calling the component method with the name as shown below
component.defaultParamers();
which hooks the loadDefaulParams method action to retrieve the values from the component action handler.
({
doInit : function(component, event, helper) {
component.defaultParamers();
},
loadDefaulParams : function(component, event, helper) {
var params = event.getParam('arguments');
console.log(params);
if (params) {
var title = params.title;
var header = params.header;
var footer = params.footer;
}
}
})
Calling Server Side Action
Now let’s consider the defaultParamers aura:method calls a server-side controller action to pass the method parameters. now server-side controller will return the result asynchronously so to handler the response we invoke the callback passed into the aura: method and set the result as a parameter in the callback.
public class AuraMethodController {
@AuraEnabled
public static List<String> getServerSideParams(){
return new List<String>{'Salesforce header from Server' ,'Salesforce footer from Server' , 'Salesforce title from Server' };
}
}
Modify the component as shown below.
<aura:component controller="AuraMethodController">
<aura:handler name ="init" value="{!this}" action="{!c.doInit}"/>
<aura:method name="defaultParamers" action="{!c.loadDefaultParams}">
<aura:attribute type="String" name="header" default="Salesforce Header" />
<aura:attribute type="String" name="footer" default="Salesforce Footer" />
<aura:attribute type="String" name="title" default="Salesforce" />
</aura:method>
</aura:component>
Now in the controller, we have defined the “onSucess” callback function to handle the server side controller response. But in the below controller I am simply printing the server side response on callback function to console.
({
doInit : function(component, event, helper) {
component.defaultParamers();
},
loadDefaultParams : function(component, event, helper) {
var params = event.getParam('arguments');
var onSucess = function(result){
console.log(result);
}
if (params) {
onSucess;
}
var action = component.get("c.getServerSideParams");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
onSucess(response.getReturnValue());
}
});
$A.enqueueAction(action);
},
})
Parent component to call a method on a child component
aura: method is used to communicate down the containment hierarchy means from the parent component to child components.To communicate up the containment hierarchy, fire a component event in the child component and handle it in the parent component.Here are the child components
AuraMethod.cmp
<aura:component >
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:method name="defaultParamers" action="{!c.loadDefaultParams}">
<aura:attribute type="String" name="header" default="Salesforce Header" />
<aura:attribute type="String" name="footer" default="Salesforce Footer" />
<aura:attribute type="String" name="title" default="Salesforce" />
</aura:method>
</aura:component>
({
doInit : function(component, event, helper) {
component.defaultParamers();
},
loadDefaultParams : function(component, event, helper) {
var params = event.getParam('arguments');
if (params) {
var title = params.title;
var header = params.header;
var footer = params.footer;
console.log('title'+title)
}
},
})
Here is the below parent component which is used to pass the parent component data to the child component of the button click.
AuraMethodInvoke.cmp
<aura:component >
<c:AuraMethod aura:id="child" />
<aura:attribute name="header" type="String" default="Parent header"/>
<aura:attribute name="title" type="String" default="Parent title"/>
<aura:attribute name="footer" type="String" default="Parent footer"/>
<lightning:button label="parent component to call a method on a child component"
onclick="{! c.callAuraMethod}" />
</aura:component>
({
callAuraMethod : function(component, event, helper) {
var childCmp = component.find("child");
var auraMethodResult = childCmp.defaultParamers(component.get('v.header') , component.get('v.footer') , component.get('v.title'));
},
})
AuraMethodTest.app
<aura:application >
<c:AuraMethodInvoke />
</aura:application>
when the user clicks on the parent component button which will get the data from the parent component attributes and pass it to the child component.
Method with Interface
Define the simple interface with the aura method as shown below.
AuraMethodIntf.intf
<aura:interface description="Interface template">
<aura:method name="defaultParamers" action="{!c.loadDefaultParams}">
<aura:attribute type="String" name="header" default="Salesforce Header" />
<aura:attribute type="String" name="footer" default="Salesforce Footer" />
<aura:attribute type="String" name="title" default="Salesforce" />
</aura:method>
</aura:interface>
And then you can implement the interface as shown below.
<aura:component implements="c:AuraMethodIntf">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
</aura:component>
({
doInit : function(component, event, helper) {
component.defaultParamers();
},
loadDefaultParams : function(component, event, helper) {
var params = event.getParam('arguments');
if (params) {
var title = params.title;
var header = params.header;
var footer = params.footer;
console.log('title'+title);
console.log('header'+header);
console.log('footer'+footer);
}
},
})
Beyond Cloud 