A helper function can be called from any JavaScript code in a component’s bundle, such as from a client-side controller or renderer.
Helper functions are similar to client-side controller functions in shape, surrounded by parentheses and curly braces to denote a JavaScript object in object-literal notation containing a map of name-value pairs. A helper function can pass in any arguments required by the function, such as the component it belongs to, a callback, or any other objects.
({ helperMethod1 : function() { // logic here }, helperMethod2 : function(component) { // logic here this.helperMethod3(var1, var2); }, helperMethod3 : function(var1, var2) { // do something with var1 and var2 here } })
A helper resource is part of the component bundle and is auto-wired via the naming convention, <componentName>Helper.js.
To create a helper using the Developer Console, click HELPER in the sidebar of the component. This helper file is valid for the scope of the component to which it’s auto-wired.
Add a helper argument to a controller function to enable the function to use the helper. Specify (component, event, helper) in the controller. These are standard parameters and you don't have to access them in the function. You can also pass in an instance variable as a parameter, for example, createExpense: function(component, expense){...}, where expense is a variable defined in the component.
The following code shows you how to call the updateItem helper function in a controller, which can be used with a custom event handler.
/* controller */ ({ newItemEvent: function(component, event, helper) { helper.updateItem(component, event.getParam("item")); } })
Helper functions are local to a component, improve code reuse, and move the heavy lifting of JavaScript logic away from the client-side controller where possible. The following code shows the helper function, which takes in the value parameter set in the controller via the item argument. The code walks through calling a server-side action and returning a callback but you can do something else in the helper function.
/* helper */ ({ updateItem : function(component, item, callback) { //Update the items via a server-side action var action = component.get("c.saveItem"); action.setParams({"item" : item}); //Set any optional callback and enqueue the action if (callback) { action.setCallback(this, callback); } $A.enqueueAction(action); } })
Add a helper argument to a renderer function to enable the function to use the helper. In the renderer, specify (component, helper) as parameters in a function signature to enable the function to access the component's helper. These are standard parameters and you don't have to access them in the function. The following code shows an example on how you can override the afterRender() function in the renderer and call open in the helper method.
detailsRenderer.js
({ afterRender : function(component, helper){ helper.open(component, null, "new"); } })
detailsHelper.js
({ open : function(component, note, mode, sort){ if(mode === "new") { //do something } // do something else, such as firing an event } })