Sharing JavaScript Code in a Component Bundle

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 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

1swfobject.registerObject("clippy.codeblock-0", "9");({
2    afterRender : function(component, helper){
3        helper.open(component, null, "new");
4    }
5})

detailsHelper.js

1swfobject.registerObject("clippy.codeblock-1", "9");({
2    open : function(component, note, mode, sort){
3        if(mode === "new") {
4            //do something
5        }
6        // do something else, such as firing an event
7    }
8})

For an example on using helper methods to customize renderers, see Client-Side Rendering to the DOM.

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.

The following code shows you how to call the updateItem helper function in a controller, which can be used with a custom event handler.

1swfobject.registerObject("clippy.codeblock-2", "9");({
2    newItemEvent: function(component, event, helper) {
3        helper.updateItem(component, event.getParam("item"));
4    }
5})

The following code shows the helper function, which takes in the value parameter set in the controller via the item argument.

1swfobject.registerObject("clippy.codeblock-3", "9");({
2    updateItem : function(component,item, callback) {
3        //Update the items via a server-side action
4        var action = component.get("c.saveItem");
5        action.setParams({"item" : item});
6        //Set any optional callback and enqueue the action
7        if (callback) {
8            action.setCallback(this, callback);
9        }
10        $A.enqueueAction(action);
11    }
12})