Call Child Component Controller From Parent Component – Aura Method

In my previous posts we have seen how we can use application and component events and when we should go for. You all must be thinking what if we want to call the controller of child component controller from the parent component. So, in this post we will see how we can do the above things.

aura:method: – Use <aura:method> to define a method as part of a component’s API. This enables you to directly call a method in a component’s client-side controller instead of firing and handling a component event.

The <aura:method> tag has these system pre defined attributes that we can use

Name: – The method name. Use the method name to call the method in JavaScript code.

Action: – The client-side controller action to execute

Access: – he access control for the method. Valid values are: public and global

Description: – The description of method.

Declaring Parameters: – We can also use parameters to send the values from parent to child using the attributes.

Below is sample of child Component

““

<aura:method name=”sampleMethod” action=”{!c.doAction}”
                        description=”Sample method with parameters”>
       <aura:attribute name=”param1″ type=”String” default=”parameter 1″/>
       <aura:attribute name=”param2″ type=”String” />
</aura:method>

““

Define the action that needs to be executed when “sampleMethod” gets called from the parent component. Create a method into Controller of Child Component. Child Component Controller sample code.

““

({
doAction : function(cmp, event) {
var params = event.getParam(‘arguments’);
if (params) {
var param1 = params.param1;
// add your code here
}
}
})

““

Get the value into the child controller: – Retrieve the arguments using event.getParam(‘arguments’). It returns an object if there are arguments or an empty array if there are no arguments. For example if you are passing 2 parameters then you can get like below

Step1: – Get the array of all the arguments

var params = event.getParam(‘arguments’);

Step2: – Now, get the value of the attribute using the name of the attribute.

var param1 = params.param1;

var param2 = params.param2;

In Final Step Call the method from the Parent Code: –

Step1: – Call the child component inside the parent component using the syntax like below and use aura:id for the child component which will let you find the child component and then you can call the controller method.

<c:childComponent aura:id=’childCmp’ /> – Use this Syntax if no namespace is defined by you.

<yourNameSpace:childComponent aura:id=’childCmp’ /> Use this Syntax if you have your own       namespace is defined by you.

Step2: – Create a button OR any event in which you want to execute the child controller method.

<lightning:button variant=”brand” label=”Submit” onclick=”{! c.handleClick }” />

Step3 : – Call the child controller method from the parent controller method.

({

handleClick : function(component, event, helper){

// Find the child component using the aura:id that we have given while creating the parent component and store the same into a variable.

var childCmp = component.find(‘childCmp’);

// Call the Child Controller method using childCmp variable dot method name defined into the child component

childCmp.sampleMethod(‘Sample Value for Param 1’, ‘Sample Value For Param 2’); // Pass the parameters here

}

})

Example: – For an example we will take a very simple scenario for creating quick contact for the selected account doing this we will reduce the work of going to account detail page and then create a contact from there. You can get the complete code from Here.

Component will look like below.

Aura Method.gif

 

Happy Coding 🙂

If you have any questions let me know in comments Section.

Resource: –

Salesforce Document

Advertisements

8 thoughts on “Call Child Component Controller From Parent Component – Aura Method

  1. Jesús July 12, 2018 / 10:03 am

    Hi Amit,

    Great Article! I am trying to develop something similar to this and I am facing a problem at the time of recovering params in doAction function.

    Because of Locker service, I cannot access to event.getParam(‘arguments’). This fails, and I tried event.getParam(‘param1’), but it’s not able to find the parameter.

    I cannot either disable Locker service, because I am using a lightning:datatable, and this is only available since version 41…. so could you give me any help? Do you know any solution to this?

    Thank you very much!

    Jesús

    Like

    • Amit Singh July 31, 2018 / 11:46 am

      Hi Jesus,

      Were you able to resolve the problem? I can access the parameters in Child Object.

      Liked by 1 person

  2. Jansi June 16, 2018 / 8:39 am

    Hi Amit,

    This is very helpful. Thank you. Can it be possible to return some value back from the child method to caller?

    Regards
    Jansi

    Like

  3. amrit April 28, 2018 / 7:44 am

    hi Amit,
    Thanx for the tutorial, I have one issue with the modal, the modal is not coming on the top its always behind the top salesforce navigation bar. can you help me

    Like

    • Amit Singh April 30, 2018 / 11:36 am

      Hi Amrit,

      Can you post the snapshot of the modal which you are getting so that I can have a look and then provide you the best solution?

      Regards,
      SFDCPanther

      Like

  4. Divya February 11, 2018 / 6:43 am

    Hi Amit,

    Thank you for your post.

    It is really helpful post. I followed your process in my requirement. everything is working fine. but it is showing a component error like “Access Check Failed! Component.setupSuper():’else’ of component ‘markup://c:BoatSearchResults {761:0} {BSRcmp}’ is not visible to ‘markup://c:BoatSearchResults {761:0} {BSRcmp}’.”

    here BSR is auraId. c:BoatSearchResults is child component.

    I amt not sure where I am missing.

    Like

    • Amit Singh February 11, 2018 / 9:35 am

      Hi Divya,

      Have you checked the Name and spelling of the aura:id and the child component aura:method is made as public or global instead of private.

      If you are still facing the issue then please paste the code here. I will check and let you know.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s