Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Supported JavaScript
Invoking Actions on Component Initialization
Sharing JavaScript Code in a Component Bundle
Sharing JavaScript Code Across Components
Using External JavaScript Libraries
Dynamically Creating Components
Detecting Data Changes with Change Handlers
Finding Components by ID
Working with Attribute Values in JavaScript
Working with a Component Body in JavaScript
Working with Events in JavaScript
Modifying the DOM
Checking Component Validity
Modifying Components Outside the Framework Lifecycle
Throwing and Handling Errors
Calling Component Methods
Dynamically Adding Event Handlers To a Component
Dynamically Showing or Hiding Markup
Adding and Removing Styles
Which Button Was Pressed?
Formatting Dates in JavaScript
Using JavaScript Promises
Making API Calls from Components
Control Access to Browser Features
Manage Trusted URLs
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Sharing JavaScript Code in a Component Bundle

Put functions that you want to reuse in the component’s helper. Helper functions also enable specialization of tasks, such as processing data and queueing server-side actions. 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.

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.

To call another function in the same helper, use the syntax: this.methodName, where this is a reference to the helper itself. For example, helperMethod2 calls helperMethod3 with this code.

Creating a Helper

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.

Using a Helper in a Controller

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.

This controller code calls an updateItem helper function.

Here’s the helper that contains the updateItem function called by the controller.

The updateItem function accepts three parameters.

  1. component—The component to which the helper belongs.
  2. item—An item that’s set as an item parameter for the saveItem Apex action.
  3. callback—An optional callback to call after the saveItem Apex action returns. In our example, the newItemEvent controller method passes in only two arguments so there’s no callback.

Using a Helper in a Renderer

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

detailsHelper.js