Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Angel ZAngel Z 

Aura:method calls apex method

Hi all,

I have 3 components. Parent, Child and Grandchild.

There's a aura:method on the Child component which invokes an action of the Grandchil.Controller
The Grandchild.Controller's action calls an apex method. 

What's the best way to call the Granchild.Controller's action from the Parent component?

Thanks in advance.
Best Answer chosen by Angel Z
Dhanya NDhanya N
Hi Angel,

This is very interesting requirement. 

I think you can call grand child's controller using nested aura:method. Something like below approach:

Parent.cmp  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" 
                access="global" >
    <c:child aura:id="childId"/>   
    Hi from parent component
    <lightning:button label="Parent button" variant="brand" onclick="{!c.onParentClick}"/>
</aura:component>

ParentController.js  
({
	onParentClick : function(component, event, helper) {
		console.log('==Parent Click==');
        component.find('childId').child();
	}
})
Child.cmp 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" 
                access="global" >
    <aura:method name="child" action="{!c.onChildClick}"/>
    <c:GrandChild aura:id="grandChildId"/>  
</aura:component>
ChildController.js 
({
	onChildClick : function(component, event, helper) {
		console.log('====Child Click==');
        component.find("grandChildId").grandChild();
	}
})
GrandChild.cmp 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" 
                access="global" >
    <aura:method name="grandChild" action="{!c.handleGrandChild}"/>
</aura:component>
GrandChildController.js 
({
	handleGrandChild : function(component, event, helper) {
		console.log('====Grand Child=');
	}
})
Not sure if it's a best approach. If you get any best approach, please post here so that it will help others as well.

Thanks,
Dhanya

All Answers

Dhanya NDhanya N
Hi Angel,

This is very interesting requirement. 

I think you can call grand child's controller using nested aura:method. Something like below approach:

Parent.cmp  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" 
                access="global" >
    <c:child aura:id="childId"/>   
    Hi from parent component
    <lightning:button label="Parent button" variant="brand" onclick="{!c.onParentClick}"/>
</aura:component>

ParentController.js  
({
	onParentClick : function(component, event, helper) {
		console.log('==Parent Click==');
        component.find('childId').child();
	}
})
Child.cmp 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" 
                access="global" >
    <aura:method name="child" action="{!c.onChildClick}"/>
    <c:GrandChild aura:id="grandChildId"/>  
</aura:component>
ChildController.js 
({
	onChildClick : function(component, event, helper) {
		console.log('====Child Click==');
        component.find("grandChildId").grandChild();
	}
})
GrandChild.cmp 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" 
                access="global" >
    <aura:method name="grandChild" action="{!c.handleGrandChild}"/>
</aura:component>
GrandChildController.js 
({
	handleGrandChild : function(component, event, helper) {
		console.log('====Grand Child=');
	}
})
Not sure if it's a best approach. If you get any best approach, please post here so that it will help others as well.

Thanks,
Dhanya
This was selected as the best answer
Angel ZAngel Z
Hi Dhanya,

Thanks for your efforts. This works, however I have an apex method call in the grandchild's controller.

What I've observed so far is the fact that the aura:method finishes before the apex method returns the response value.
  
grandchild: function (cmp, event, helper) {
    console.log('in the grandchild function');
      var action = cmp.get("c.theApexMethod");
       action.setParams({
          //parameters
       });
       console.log('parameters set');
      action.setCallback(this, function (response) {
          var state = response.getState();
            console.log('NOTHING GETS RETURNED HERE');
          if (state === "SUCCESS") {
           //code
        }
}


I believe this is related to Asynchronous/Synchronous calls.

Regards,

Angel
Angel ZAngel Z
Found the problem - it wasn't related to the initial "problem".
Dhanya NDhanya N
May I know what was the problem and its solution?