18

Given two controller methods defined for a Lightning component as follows, how can I call bar() from foo()? If I try it using the code shown below, I get the error, "bar is not defined".

({
    bar : function(component, event, helper) {
        console.log('bar just happened');
    },
    foo : function(component, event, helper) {

        // I would love for this to work,
        // but it doesn't work as expected.
        bar(component, event, helper);

        // I've also tried this but get a slightly 
        // different but equally discouraging error.
        this.bar(component, event, helper);
    }
})
38

try this, it works perfectly

({
    bar : function(component, event, helper) {
        console.log('bar just happened');
    },
    foo : function(component, event, helper) {

        // I would love for this to work,
        // but it doesn't work as expected.
        //bar(component, event, helper);

        // I've also tried this but get a slightly 
        // different but equally discouraging error.
        //this.bar(component, event, helper);

        var a = component.get('c.bar');
        $A.enqueueAction(a);


    }
})
  • This worked while the other didn't. Thanks!! – user8310 Oct 18 '17 at 5:49
  • it works but I am not able to pass parameters using setParams, all of them are coming up as null. Any suggestions? – Jitender Padda Jan 16 at 0:47
  • 1
    @JitenderPadda To add params to the action before you queue it, just call the action's setParam() or setParams() method. So for the above example you would just need to add "a.setParam(param_name, param_value)" or "a.setParams({param_name : param_value})" before you queue it. – rStrunk Apr 20 at 21:24
  • @rStrunk params could not be set like the way you mentioned. Can you plz elaborate on it? – lambad Jul 18 at 11:19
19

The shortest way of calling a controller function from another controller function you can use:

$A.enqueueAction(component.get('c.controllerMethod'));

When you are calling a helper function from a controller function you can use:

helper.helperMethod(component, event, helper);

When you are calling a helper function from a helper function you can use:

this.helperMethod(component, event, helper);

However, if you are calling a helper function from a helper function, but within a callback method you need to do the following:

// Here we assign the value of this into the self variable
var self = this;

var action = component.get('c.serverSideControllerMethod');

action.setCallback(this, function(response){
    var state = response.getState();

    if(state == 'SUCCESS'){
        // Code here.

        // Here we trigger the helper method with the self variable previously defined
        self.helperMethod(component, event, helper);
        // If we call this.helperMethod(component, event, helper); here it will look at this in the context of the callback function NOT the helper function
    }
})
  • 1
    Hi Timothy, self.helperMethod does not work instead this.helperMethod worked for me when calling helper function from a helper function, but within a callback method – Anita Bhanarkar Apr 16 at 8:56
  • FYI "$A.enqueueAction" will run the code asynchronously (it will trigger the action queue at the end of the method). If you need it to run synchronously, I think you can instead put it in a helper method and pass cmp, event, helper (probably not best practice though). – Connor Jul 19 at 15:38
4

I find this link:

How to call one controller function from another controller function in Lightning?

From me you can use:

Controller:

foo : function(component, event, helper) {
    helper.bar(component, event, helper);
}

Helper:

bar : function(component, event, helper) {
        console.log('bar just happened');
    }

OR:

I find aura method - documentation https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_tag_method.htm

this look like that:

In component:

<aura:method name="bar" action="{!c.foo}"
  description="Sample method with parameters">
    <aura:attribute name="parametr" type="String" default="valueOfParam" />
</aura:method>

Controller:

foo : function(component, event, helper) {
    component.bar(parametr);
}

Let me know if this help you.

1

As per my knowledge, you can't call other methods of lightning controller from the same lightning controller method. But, you can call other methods of helper from the helper. To call other helper methods, you will have to use this keyword.

Example:

ExampleController.js :

onValueChange : function(component, event, helper){

         helper.callMethodOne(component, event);

}

ExampleHelper.js :

callMethodOne : function(component, event){

         this.callMethodTwo(component, event);

},

callMethodTwo : function(component, event){

         console.log("calling callMethodTwo");

         // Your re-usable code inside the related Component.

}

Note : Whenever you call helper method from controller, the calling method of controller should have below 3 parameters in the exact same order.

  1. component. 2. event 3. helper
1

If I do need to add a method in controller which I can use from multiple places then I add that method in component attribute in doing.

doinit: function doinit(component){
      component.reusableMethod = function(attribute){
           console.log(attribute);
      }
},
action1: function action1(component) {
    component.reusableMethod('action1'); 
},
action2: function action2(component) {
    component.reusableMethod('action2'); 
}

Generally I don't do so. Only Scenario where I do use above method is, if i have to release a patch and we do not have any helper file. We cannot add any helper file in patch release.

0

If you want to call a function from another function you will need to have the two functions defined in your lightning helper rather than the lightning controller.

You can then call

bar : function(component, event, helper) {
    console.log('bar just happened');
},
foo : function(component, event, helper) {
    this.bar(component, event, helper);
}
  • Oh, and in order to call a helper function you can do the below: helper.foo(component, event, helper); – Jannis Bott May 2 '17 at 2:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.