Return Result for Synchronous Code

Step 1: Define aura:method in Markup

Let’s look at a logParam aura:method that executes synchronous code. We’ll use the c:auraMethodCallerWrapper.app and components outlined in Calling Component Methods. Here’s the markup that defines the aura:method.

1<!-- c:auraMethod -->
2<aura:component>
3    <aura:method name="logParam"
4      description="Sample method with parameter">
5        <aura:attribute name="message" type="String" default="default message" />
6    </aura:method>
7    
8    <p>This component has an aura:method definition.</p>
9</aura:component>

The logParam aura:method has an aura:attribute with a name of message. This attribute enables you to set a message parameter when you call the logParam method.

The name attribute of logParam configures the aura:method to invoke logParam() in the client-side controller.

An aura:method can have multiple aura:attribute tags. Each aura:attribute corresponds to a parameter that you can pass into the aura:method. For more details on the syntax, see aura:method.

You don’t explicitly declare a return value in the aura:method markup. You just use a return statement in the JavaScript controller.

Step 2: Implement aura:method Logic in Controller

The logParam aura:method invokes logParam() in auraMethodController.js. Let’s look at that source.

1/* auraMethodController.js */
2({
3    logParam : function(cmp, event) {
4        var params = event.getParam('arguments');
5        if (params) {
6            var message = params.message;
7            console.log("message: " + message);
8            return message;
9        }
10    },
11})

logParam() simply logs the parameter passed in and returns the parameter value to demonstrate how to use the return statement. If your code is synchronous, you can use a return statement; for example, you’re not making an asynchronous server-side action call.

Step 3: Call aura:method from Parent Controller

callAuraMethod() in the controller for c:auraMethodCaller calls the logParam aura:method defined in its child component, c:auraMethod. Here’s the controller for c:auraMethodCaller.

1/* auraMethodCallerController.js */
2({
3    callAuraMethod : function(component, event, helper) {
4        var childCmp = component.find("child");
5        // call the aura:method in the child component
6        var auraMethodResult = 
7          childCmp.logParam("message sent by parent component");
8        console.log("auraMethodResult: " + auraMethodResult);
9    },
10})

callAuraMethod() finds the child component, c:auraMethod, and calls its logParam aura:method with an argument for the message parameter of the aura:method.

1childCmp.logParam("message sent by parent component");

auraMethodResult is the value returned from logParam.

Step 4: Add Button to Initiate Call to aura:method

The c:auraMethodCaller markup contains a lightning:button that invokes callAuraMethod() in auraMethodCallerController.js. We use this button to initiate the call to aura:method in the child component.

1<!-- c:auraMethodCaller.cmp -->
2<aura:component >
3    <p>Parent component calls aura:method in child component</p>
4    <c:auraMethod aura:id="child" />
5    
6    <lightning:button label="Call aura:method in child component"
7        onclick="{! c.callAuraMethod}" />
8</aura:component>