How to call helper method from a different lightning component?











up vote
1
down vote

favorite
1












I have lightning component A and lightning component B, in lightning component B there is a helper method X, how to call helper method X in lightning component B from the helper in lightning component A ?



(Please provide boilerplate code, thank you)










share|improve this question







New contributor




Mostafa Ali Mansour is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • Hi, welcome to SFSE, please take a moment to read How to Ask and take the tour in order to get familair with the forum. Make sure you include waht you have tried and the problem you are facing with the code you wrote. If you are new to salesforce and lightning component development, then you should try trailheads. thanks
    – glls
    3 hours ago















up vote
1
down vote

favorite
1












I have lightning component A and lightning component B, in lightning component B there is a helper method X, how to call helper method X in lightning component B from the helper in lightning component A ?



(Please provide boilerplate code, thank you)










share|improve this question







New contributor




Mostafa Ali Mansour is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • Hi, welcome to SFSE, please take a moment to read How to Ask and take the tour in order to get familair with the forum. Make sure you include waht you have tried and the problem you are facing with the code you wrote. If you are new to salesforce and lightning component development, then you should try trailheads. thanks
    – glls
    3 hours ago













up vote
1
down vote

favorite
1









up vote
1
down vote

favorite
1






1





I have lightning component A and lightning component B, in lightning component B there is a helper method X, how to call helper method X in lightning component B from the helper in lightning component A ?



(Please provide boilerplate code, thank you)










share|improve this question







New contributor




Mostafa Ali Mansour is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











I have lightning component A and lightning component B, in lightning component B there is a helper method X, how to call helper method X in lightning component B from the helper in lightning component A ?



(Please provide boilerplate code, thank you)







lightning-components helper






share|improve this question







New contributor




Mostafa Ali Mansour is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











share|improve this question







New contributor




Mostafa Ali Mansour is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









share|improve this question




share|improve this question






New contributor




Mostafa Ali Mansour is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









asked 3 hours ago









Mostafa Ali Mansour

61




61




New contributor




Mostafa Ali Mansour is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





New contributor





Mostafa Ali Mansour is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.






Mostafa Ali Mansour is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.












  • Hi, welcome to SFSE, please take a moment to read How to Ask and take the tour in order to get familair with the forum. Make sure you include waht you have tried and the problem you are facing with the code you wrote. If you are new to salesforce and lightning component development, then you should try trailheads. thanks
    – glls
    3 hours ago


















  • Hi, welcome to SFSE, please take a moment to read How to Ask and take the tour in order to get familair with the forum. Make sure you include waht you have tried and the problem you are facing with the code you wrote. If you are new to salesforce and lightning component development, then you should try trailheads. thanks
    – glls
    3 hours ago
















Hi, welcome to SFSE, please take a moment to read How to Ask and take the tour in order to get familair with the forum. Make sure you include waht you have tried and the problem you are facing with the code you wrote. If you are new to salesforce and lightning component development, then you should try trailheads. thanks
– glls
3 hours ago




Hi, welcome to SFSE, please take a moment to read How to Ask and take the tour in order to get familair with the forum. Make sure you include waht you have tried and the problem you are facing with the code you wrote. If you are new to salesforce and lightning component development, then you should try trailheads. thanks
– glls
3 hours ago










1 Answer
1






active

oldest

votes

















up vote
2
down vote













There are basically two ways to do this.



Option 1: Extend a Component



You can extend an extensible component to share helper methods.





BaseCmp





BaseCmp.cmp



<aura:component extensible="true">
</aura:component>


BaseCmpHelper.js



({
helperMethod1: function() {
// do stuff here
}
})




ChildCmp





ChildCmp.cmp



<aura:component extends="c:BaseCmp">
<aura:handler name="init" value="{!this}" action="{!c.init}" />
</aura:component>


ChildCmpController.js



({
init: function(component, event, helper) {
helper.helperMethod1();
}
})




Notes:



You can only extend one component. You can chain extensions together, but not recommended (e.g. Base -> Child1 -> Child2). This will have a performance impact.



Methods in child components with the same name as in the parent components will override the parent definition. Make sure all names are unique.





Option 2: Call a Controller Method



You can use aura:method to call a controller method.





utils





utils.cmp



<aura:component>
<aura:method name="util1" action="{!c.callUtilMethod}" description="Calls util1">
<aura:attribute name="aParam" type="String" />
</aura:method>
</aura:component>


utilsController.js



({
callUtilMethod: function(c,e,h) {
return h.utilMethod1(c, e.getParam("arguments"));
}
})


utilsHelper.js



({
utilMethod1: function(c,args) {
// do what you want here, then return...
return someValue;
}
})




This is called through an instance of the component.



main



main.cmp



<aura:component>
<c:utils aura:id="utils" />
<!-- ... -->
</aura:component>


mainController.js



({
someMethod: function(c,e,h) {
var retVal = c.find("utils").util({ aParam: "Hello World" });
}
})




You can also do asynchronous return values; define the method's parameter as a Function:



  <aura:method name="util1" action="{!c.callUtilMethod}" description="Calls util1">
<aura:attribute name="callback" type="Function" />
</aura:method>


Which you then call normally in your method:



({
utilMethod1: function(c,args) {
// do what you want here, then return...
args.callback(returnValue);
}
})


And would be called with a helper function:



({
someMethod: function(c,e,h) {
var retVal = c.find("utils").util({ callback: h.handleResponse.bind(h, c) }});
}
})


Your response handler then looks like:



({
handleResponse: function(c, retVal) {
// Handle the response here
}
})




Notes:



You can only call methods from components in your own namespace, or global methods from another namespace.



You need an instance of the component to call the helper. You cannot call it without first loading the component. This has implications on performance, so it should be used sparingly, and only as necessary.





There are better ways to share code, such as ltng:require. These two methods do work, but are not recommended. You can read more about all of this stuff in the documentation.






share|improve this answer





















    Your Answer








    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "459"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: false,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: null,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });






    Mostafa Ali Mansour is a new contributor. Be nice, and check out our Code of Conduct.










    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f243770%2fhow-to-call-helper-method-from-a-different-lightning-component%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    2
    down vote













    There are basically two ways to do this.



    Option 1: Extend a Component



    You can extend an extensible component to share helper methods.





    BaseCmp





    BaseCmp.cmp



    <aura:component extensible="true">
    </aura:component>


    BaseCmpHelper.js



    ({
    helperMethod1: function() {
    // do stuff here
    }
    })




    ChildCmp





    ChildCmp.cmp



    <aura:component extends="c:BaseCmp">
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    </aura:component>


    ChildCmpController.js



    ({
    init: function(component, event, helper) {
    helper.helperMethod1();
    }
    })




    Notes:



    You can only extend one component. You can chain extensions together, but not recommended (e.g. Base -> Child1 -> Child2). This will have a performance impact.



    Methods in child components with the same name as in the parent components will override the parent definition. Make sure all names are unique.





    Option 2: Call a Controller Method



    You can use aura:method to call a controller method.





    utils





    utils.cmp



    <aura:component>
    <aura:method name="util1" action="{!c.callUtilMethod}" description="Calls util1">
    <aura:attribute name="aParam" type="String" />
    </aura:method>
    </aura:component>


    utilsController.js



    ({
    callUtilMethod: function(c,e,h) {
    return h.utilMethod1(c, e.getParam("arguments"));
    }
    })


    utilsHelper.js



    ({
    utilMethod1: function(c,args) {
    // do what you want here, then return...
    return someValue;
    }
    })




    This is called through an instance of the component.



    main



    main.cmp



    <aura:component>
    <c:utils aura:id="utils" />
    <!-- ... -->
    </aura:component>


    mainController.js



    ({
    someMethod: function(c,e,h) {
    var retVal = c.find("utils").util({ aParam: "Hello World" });
    }
    })




    You can also do asynchronous return values; define the method's parameter as a Function:



      <aura:method name="util1" action="{!c.callUtilMethod}" description="Calls util1">
    <aura:attribute name="callback" type="Function" />
    </aura:method>


    Which you then call normally in your method:



    ({
    utilMethod1: function(c,args) {
    // do what you want here, then return...
    args.callback(returnValue);
    }
    })


    And would be called with a helper function:



    ({
    someMethod: function(c,e,h) {
    var retVal = c.find("utils").util({ callback: h.handleResponse.bind(h, c) }});
    }
    })


    Your response handler then looks like:



    ({
    handleResponse: function(c, retVal) {
    // Handle the response here
    }
    })




    Notes:



    You can only call methods from components in your own namespace, or global methods from another namespace.



    You need an instance of the component to call the helper. You cannot call it without first loading the component. This has implications on performance, so it should be used sparingly, and only as necessary.





    There are better ways to share code, such as ltng:require. These two methods do work, but are not recommended. You can read more about all of this stuff in the documentation.






    share|improve this answer

























      up vote
      2
      down vote













      There are basically two ways to do this.



      Option 1: Extend a Component



      You can extend an extensible component to share helper methods.





      BaseCmp





      BaseCmp.cmp



      <aura:component extensible="true">
      </aura:component>


      BaseCmpHelper.js



      ({
      helperMethod1: function() {
      // do stuff here
      }
      })




      ChildCmp





      ChildCmp.cmp



      <aura:component extends="c:BaseCmp">
      <aura:handler name="init" value="{!this}" action="{!c.init}" />
      </aura:component>


      ChildCmpController.js



      ({
      init: function(component, event, helper) {
      helper.helperMethod1();
      }
      })




      Notes:



      You can only extend one component. You can chain extensions together, but not recommended (e.g. Base -> Child1 -> Child2). This will have a performance impact.



      Methods in child components with the same name as in the parent components will override the parent definition. Make sure all names are unique.





      Option 2: Call a Controller Method



      You can use aura:method to call a controller method.





      utils





      utils.cmp



      <aura:component>
      <aura:method name="util1" action="{!c.callUtilMethod}" description="Calls util1">
      <aura:attribute name="aParam" type="String" />
      </aura:method>
      </aura:component>


      utilsController.js



      ({
      callUtilMethod: function(c,e,h) {
      return h.utilMethod1(c, e.getParam("arguments"));
      }
      })


      utilsHelper.js



      ({
      utilMethod1: function(c,args) {
      // do what you want here, then return...
      return someValue;
      }
      })




      This is called through an instance of the component.



      main



      main.cmp



      <aura:component>
      <c:utils aura:id="utils" />
      <!-- ... -->
      </aura:component>


      mainController.js



      ({
      someMethod: function(c,e,h) {
      var retVal = c.find("utils").util({ aParam: "Hello World" });
      }
      })




      You can also do asynchronous return values; define the method's parameter as a Function:



        <aura:method name="util1" action="{!c.callUtilMethod}" description="Calls util1">
      <aura:attribute name="callback" type="Function" />
      </aura:method>


      Which you then call normally in your method:



      ({
      utilMethod1: function(c,args) {
      // do what you want here, then return...
      args.callback(returnValue);
      }
      })


      And would be called with a helper function:



      ({
      someMethod: function(c,e,h) {
      var retVal = c.find("utils").util({ callback: h.handleResponse.bind(h, c) }});
      }
      })


      Your response handler then looks like:



      ({
      handleResponse: function(c, retVal) {
      // Handle the response here
      }
      })




      Notes:



      You can only call methods from components in your own namespace, or global methods from another namespace.



      You need an instance of the component to call the helper. You cannot call it without first loading the component. This has implications on performance, so it should be used sparingly, and only as necessary.





      There are better ways to share code, such as ltng:require. These two methods do work, but are not recommended. You can read more about all of this stuff in the documentation.






      share|improve this answer























        up vote
        2
        down vote










        up vote
        2
        down vote









        There are basically two ways to do this.



        Option 1: Extend a Component



        You can extend an extensible component to share helper methods.





        BaseCmp





        BaseCmp.cmp



        <aura:component extensible="true">
        </aura:component>


        BaseCmpHelper.js



        ({
        helperMethod1: function() {
        // do stuff here
        }
        })




        ChildCmp





        ChildCmp.cmp



        <aura:component extends="c:BaseCmp">
        <aura:handler name="init" value="{!this}" action="{!c.init}" />
        </aura:component>


        ChildCmpController.js



        ({
        init: function(component, event, helper) {
        helper.helperMethod1();
        }
        })




        Notes:



        You can only extend one component. You can chain extensions together, but not recommended (e.g. Base -> Child1 -> Child2). This will have a performance impact.



        Methods in child components with the same name as in the parent components will override the parent definition. Make sure all names are unique.





        Option 2: Call a Controller Method



        You can use aura:method to call a controller method.





        utils





        utils.cmp



        <aura:component>
        <aura:method name="util1" action="{!c.callUtilMethod}" description="Calls util1">
        <aura:attribute name="aParam" type="String" />
        </aura:method>
        </aura:component>


        utilsController.js



        ({
        callUtilMethod: function(c,e,h) {
        return h.utilMethod1(c, e.getParam("arguments"));
        }
        })


        utilsHelper.js



        ({
        utilMethod1: function(c,args) {
        // do what you want here, then return...
        return someValue;
        }
        })




        This is called through an instance of the component.



        main



        main.cmp



        <aura:component>
        <c:utils aura:id="utils" />
        <!-- ... -->
        </aura:component>


        mainController.js



        ({
        someMethod: function(c,e,h) {
        var retVal = c.find("utils").util({ aParam: "Hello World" });
        }
        })




        You can also do asynchronous return values; define the method's parameter as a Function:



          <aura:method name="util1" action="{!c.callUtilMethod}" description="Calls util1">
        <aura:attribute name="callback" type="Function" />
        </aura:method>


        Which you then call normally in your method:



        ({
        utilMethod1: function(c,args) {
        // do what you want here, then return...
        args.callback(returnValue);
        }
        })


        And would be called with a helper function:



        ({
        someMethod: function(c,e,h) {
        var retVal = c.find("utils").util({ callback: h.handleResponse.bind(h, c) }});
        }
        })


        Your response handler then looks like:



        ({
        handleResponse: function(c, retVal) {
        // Handle the response here
        }
        })




        Notes:



        You can only call methods from components in your own namespace, or global methods from another namespace.



        You need an instance of the component to call the helper. You cannot call it without first loading the component. This has implications on performance, so it should be used sparingly, and only as necessary.





        There are better ways to share code, such as ltng:require. These two methods do work, but are not recommended. You can read more about all of this stuff in the documentation.






        share|improve this answer












        There are basically two ways to do this.



        Option 1: Extend a Component



        You can extend an extensible component to share helper methods.





        BaseCmp





        BaseCmp.cmp



        <aura:component extensible="true">
        </aura:component>


        BaseCmpHelper.js



        ({
        helperMethod1: function() {
        // do stuff here
        }
        })




        ChildCmp





        ChildCmp.cmp



        <aura:component extends="c:BaseCmp">
        <aura:handler name="init" value="{!this}" action="{!c.init}" />
        </aura:component>


        ChildCmpController.js



        ({
        init: function(component, event, helper) {
        helper.helperMethod1();
        }
        })




        Notes:



        You can only extend one component. You can chain extensions together, but not recommended (e.g. Base -> Child1 -> Child2). This will have a performance impact.



        Methods in child components with the same name as in the parent components will override the parent definition. Make sure all names are unique.





        Option 2: Call a Controller Method



        You can use aura:method to call a controller method.





        utils





        utils.cmp



        <aura:component>
        <aura:method name="util1" action="{!c.callUtilMethod}" description="Calls util1">
        <aura:attribute name="aParam" type="String" />
        </aura:method>
        </aura:component>


        utilsController.js



        ({
        callUtilMethod: function(c,e,h) {
        return h.utilMethod1(c, e.getParam("arguments"));
        }
        })


        utilsHelper.js



        ({
        utilMethod1: function(c,args) {
        // do what you want here, then return...
        return someValue;
        }
        })




        This is called through an instance of the component.



        main



        main.cmp



        <aura:component>
        <c:utils aura:id="utils" />
        <!-- ... -->
        </aura:component>


        mainController.js



        ({
        someMethod: function(c,e,h) {
        var retVal = c.find("utils").util({ aParam: "Hello World" });
        }
        })




        You can also do asynchronous return values; define the method's parameter as a Function:



          <aura:method name="util1" action="{!c.callUtilMethod}" description="Calls util1">
        <aura:attribute name="callback" type="Function" />
        </aura:method>


        Which you then call normally in your method:



        ({
        utilMethod1: function(c,args) {
        // do what you want here, then return...
        args.callback(returnValue);
        }
        })


        And would be called with a helper function:



        ({
        someMethod: function(c,e,h) {
        var retVal = c.find("utils").util({ callback: h.handleResponse.bind(h, c) }});
        }
        })


        Your response handler then looks like:



        ({
        handleResponse: function(c, retVal) {
        // Handle the response here
        }
        })




        Notes:



        You can only call methods from components in your own namespace, or global methods from another namespace.



        You need an instance of the component to call the helper. You cannot call it without first loading the component. This has implications on performance, so it should be used sparingly, and only as necessary.





        There are better ways to share code, such as ltng:require. These two methods do work, but are not recommended. You can read more about all of this stuff in the documentation.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered 2 hours ago









        sfdcfox

        245k10185418




        245k10185418






















            Mostafa Ali Mansour is a new contributor. Be nice, and check out our Code of Conduct.










            draft saved

            draft discarded


















            Mostafa Ali Mansour is a new contributor. Be nice, and check out our Code of Conduct.













            Mostafa Ali Mansour is a new contributor. Be nice, and check out our Code of Conduct.












            Mostafa Ali Mansour is a new contributor. Be nice, and check out our Code of Conduct.
















            Thanks for contributing an answer to Salesforce Stack Exchange!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f243770%2fhow-to-call-helper-method-from-a-different-lightning-component%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Ellipse (mathématiques)

            Quarter-circle Tiles

            Mont Emei