Lightning Aura Components Developer Guide
j
No Results
Search Tips:
- Please consider misspellings
- Try different search keywords
Return Result for Asynchronous Code
Step 1: Define aura:method in Markup
Let’s look at an echo aura:method that uses a callback. We’ll use the c:auraMethodCallerWrapper.app and components outlined in Calling Component Methods. Here’s the echo aura:method in the c:auraMethod component.
<!-- c:auraMethod -->
<aura:component controller="SimpleServerSideController">
<aura:method name="echo"
description="Sample method with server-side call">
<aura:attribute name="callback" type="Function" />
</aura:method>
<p>This component has an aura:method definition.</p>
</aura:component>The echo aura:method has an aura:attribute with a name of callback. This attribute enables you to set a callback that’s invoked by the aura:method after execution of the server-side action in SimpleServerSideController.
Step 2: Implement aura:method Logic in Controller
The echo aura:method invokes echo() in auraMethodController.js. Let’s look at the source.
/* auraMethodController.js */
({
echo : function(cmp, event) {
var params = event.getParam('arguments');
var callback;
if (params) {
callback = params.callback;
}
var action = cmp.get("c.serverEcho");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
console.log("From server: " + response.getReturnValue());
// return doesn't work for async server action call
//return response.getReturnValue();
// call the callback passed into aura:method
if (callback) callback(response.getReturnValue());
}
else if (state === "INCOMPLETE") {
// do something
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
},
})echo() calls the serverEcho() server-side controller action, which we’ll create next.
Step 3: Create Apex Server-Side Controller
The echo aura:method calls a server-side controller action called serverEcho. Here’s the source for the server-side controller.
public with sharing class SimpleServerSideController {
@AuraEnabled
public static String serverEcho() {
return ('Hello from the server');
}
}The serverEcho() method returns a String.
Step 4: Call aura:method from Parent Controller
Here’s the controller for c:auraMethodCaller. It calls the echo aura:method in its child component, c:auraMethod.
/* auraMethodCallerController.js */
({
callAuraMethodServerTrip : function(component, event, helper) {
var childCmp = component.find("child");
// call the aura:method in the child component
childCmp.echo(function(result) {
console.log("callback for aura:method was executed");
console.log("result: " + result);
});
},
})callAuraMethodServerTrip() finds the child component, c:auraMethod, and calls its echo aura:method. echo() passes a callback function into the aura:method.
The callback configured in auraMethodCallerController.js logs the result.
function(result) {
console.log("callback for aura:method was executed");
console.log("result: " + result);
}Step 5: Add Button to Initiate Call to aura:method
The c:auraMethodCaller markup contains a lightning:button that invokes callAuraMethodServerTrip() in auraMethodCallerController.js. We use this button to initiate the call to the aura:method in the child component.
Here’s the markup for c:auraMethodCaller.
<!-- c:auraMethodCaller.cmp -->
<aura:component >
<p>Parent component calls aura:method in child component</p>
<c:auraMethod aura:id="child" />
<lightning:button label="Call aura:method (server trip) in child component"
onclick="{! c.callAuraMethodServerTrip}" />
</aura:component>