{"id":6007,"date":"2021-02-12T12:28:00","date_gmt":"2021-02-12T12:28:00","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=6007"},"modified":"2021-02-11T12:29:37","modified_gmt":"2021-02-11T12:29:37","slug":"using-aura-method-to-pass-value-from-child-component-to-parent-component-with-example","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/02\/12\/using-aura-method-to-pass-value-from-child-component-to-parent-component-with-example\/","title":{"rendered":"Using Aura method to pass value from Child component to Parent component (with example)"},"content":{"rendered":"\n

In this blog, we will discuss how to use <aura:method><\/a> to define a method as part of a component’s API. This enables you to directly call a method in a component\u2019s client-side controller instead of firing and handling a component event.<\/p>\n\n\n\n

The <aura:method> tag has following attributes:<\/p>\n\n\n\n

Attribute<\/td>Type<\/td>Description<\/td><\/tr>
name<\/td>String<\/td>The method name. In other words, you can use the method name to call the method in JavaScript code.<\/td><\/tr>
action<\/td>Expression<\/td>The client-side controller action to execute.<\/td><\/tr>
access<\/td>String<\/td>The access control for the method. Valid values are:
public<\/em>\u2014Any component in the same namespace can call the method. This is the default access level.
global<\/em>\u2014Any component in any namespace can call the method.<\/td><\/tr>
description<\/td>String<\/td>The method description.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

An <aura:method> can optionally include parameters. We use an <aura:attribute> tag within an <aura:method> to declare a parameter for the method.<\/p>\n\n\n\n

Example<\/h4>\n\n\n\n

In the below example, we are creating a Parent component aura method with two parameters. These two parameters are \u2018GreetingParam’ and \u2018PersonNameParam’. After that, we assign these parameters default values of \u2018Hello\u2019 and \u2018John\u2019 respectively.<\/p>\n\n\n\n

ParentComponent<\/strong><\/h4>\n\n\n\n

We can define the component using the following code.<\/p>\n\n\n\n

<aura:component>\r\n<aura:method name=\"greetingMethod\" action=\"{!c.getMessage}\" access=\"public\">\r\n\t<aura:attribute name=\"GreetingParam\" type=\"String\" default=\"Hello\"\/> \r\n\t<aura:attribute name=\"PersonNameParam\" type=\"String\" default=\"John\"\/> \r\n<\/aura:method>\r\n<\/aura:component>\r<\/code><\/pre>\n\n\n\n
ParentComponentController<\/strong><\/h4>\n\n\n\n
Firstly, in Parent Component controller, we are getting the value of parameters and showing alert.<\/p>\n\n\n\n
({\r\n    getMessage : function(component, event) {\r\n        \/\/get method paramaters\r\n        var params = event.getParam('arguments');\r\n        if (params) {\r\n            var param1 = params.GreetingParam;\r\n            var param2 = params.PersonNameParam;\r\n            alert(param1 + \" \" + param2);\r\n        }\r\n    }\r\n})\r<\/code><\/pre>\n\n\n\n
ChildComponent<\/strong><\/h4>\n\n\n\n
Now in child component we are declaring aura:attribute of type Aura.Component, so we can store parent component reference. Also added button for calling child component controller method.<\/p>\n\n\n\n
<aura:attribute name=\"parent\" type=\"Aura.Component\"\/>\r\n<lightning:button variant=\"brand\" label=\"Invoke Parent Method\" onclick=\"{!c.callParentMethod}\" \/><\/code><\/pre>\n\n\n\n
ChildComponentController<\/strong><\/h4>\n\n\n\n
Similarly, in ChildComponentController, we have to get the parent component and calling it\u2019s aura method.<\/p>\n\n\n\n
({\r\n\tcallParentMethod : function(component, event, helper) {\r\n        \/\/Call Parent aura method\r\n        var parentComponent = component.get(\"v.parent\");                         \r\n\t\tparentComponent.greetingMethod()\r\n    }\r\n})<\/code><\/pre>\n\n\n\n
Updated ParentComponent<\/strong><\/h4>\n\n\n\n
After that, in the Parent component, we need to add child component and pass the reference in it.<\/p>\n\n\n\n
<aura:component>\r\n<aura:method name=\"greetingMethod\" action=\"{!c.getMessage}\" access=\"public\">\r\n\t<aura:attribute name=\"GreetingParam\" type=\"String\" default=\"Hello\"\/> \r\n\t<aura:attribute name=\"PersonNameParam\" type=\"String\" default=\"John\"\/> \r\n<\/aura:method>\r\n<c:ChildComponent parent=\"{!this}\"><\/c:ChildComponent>\r\n<\/aura:component>\r<\/code><\/pre>\n\n\n\n
Here is output when users click on Invoke Parent Method <\/strong>button. Output is \u2018Hello John\u2019 because no value of parameter is passed. So it is showing default value.<\/p>\n\n\n\n
\"Aura<\/a><\/center>\n
Aura Component Example<\/i><\/center><\/font>\n\n\n\n
In the above example, we are using parameters of the parent component. We can also pass parameters from child component to parent component like this:<\/p>\n\n\n\n
({\r\n\tcallParentMethod : function(component, event, helper) {\r\n        \/\/Call Parent aura method\r\n        var parentComponent = component.get(\"v.parent\");                         \r\n\t\tparentComponent.greetingMethod('Happy coding','session')\r\n    }\r\n})<\/code><\/pre>\n\n\n\n
Now when the user click on the Invoke Parent Method<\/strong> button on the child component. The output will be \u2018Happy coding session\u2019 instead of \u2018Hello John\u2019 because we are passing the value of attributes.<\/p>\n\n\n\n
aura:method always executes synchronously so method execution finishes before it returns.<\/em><\/strong><\/p>\n\n\n\n
We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please contact us at\u00a0salesforce@greytrix.com<\/a>.<\/p>\n\n\n\n
About Us<\/b><\/br>\n
Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.

 Greytrix has some unique solutions for Cloud CRM such as Salesforce Sage integration<\/a> for Sage X3<\/a>, Sage 100<\/a> and Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM Salesforce customization and development services<\/a> along with services such as Salesforce Data Migration<\/a>, Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU™ integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on Salesforce AppExchange<\/a>.
 The GUMU™ Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.

 For more information on our Salesforce products and services, contact us at salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\n
Related Posts<\/strong><\/p>\n\n\n\n