I have a component that dynamically creates buttons which, when clicked, apply filters and then re-query the back end for data.

While I can assign onclick events to each button, I can't find a way to call a helper function.

I have only had success in using pure Javascript to assign

myButton.onclick = function(){alert('this works');};

but the code needs to pass parameters to the back end and then process and display the results in the DOM, so I really need to be able to call a helper function.

I saw an article saying someone was able to call a helper function, but this doesn't work when onclick is assigned dynamically. I have tried helper.functionToCall(cmp), this.functionToCall(cmp), this.helper.functionToCall(cmp), functionToCall(cmp) and many other things.

Is there a way to do this?

  • So to be clear, my question is: is there a way to dynamically create buttons after the page loads which can call a helper function and pass specific parameters when clicked? What does that onclick assignment look like which can call a helper function and also pass parameters?
    – Tim Thomas
    Jul 14, 2017 at 1:49

2 Answers 2


I just did something like this the other day. Not sure if it meets all your needs but it at least illustrates the concept

Component Controller

doinit: function(component,event,helper){
    <iframe name="pc-frame" src="{!v.iframe-url}" style="width: 100%;height: 770px; border: none;" scrolling="true"/>

                 tag: "iframe",
                     "id": "pc-frame",
                     "src": tmp, 
                     "scrolling" : "true",
                     "onload" : component.getReference("c.handlerFunction") //You can change to onclick if your html element supports it 
                    var container = component.find("container");
                    if (container.isValid()) {
                        var body = container.get("v.body");
                        container.set("v.body", body);


handlerFunction : function(component, event,helper){



  • My situation is different - I am creating many buttons, but they all need to call the same function, but with different parameters.
    – Tim Thomas
    Jul 14, 2017 at 1:38
  • Well that would have been helpful to know up front. You may want to update the question to include that...If you can find a way to deduce the parameters from within the function this would still work though
    – Eric
    Jul 14, 2017 at 1:40

I would really hope there is a better way, but in the absence of any apparent SF solution, I implemented a JS hack -

I put a hidden button on the form so it existed in the component at the time of load, and had onclick code which invoked a defined controller function.

<input type="button" class="hide" id="topicId" value="" onclick="{! c.getCategories }" />

Then I added onclick functions to each of the buttons that need to call the helper function:

button.onclick = function(){var x = document.getElementById('topicId'); x.value=this.id;x.click();};

Upon clicking, the controller function retrieves the (string) parameter from the button's value and passes it the helper function:

    getCategories : function(cmp, event, helper){
        var topicId = document.getElementById("topicId");

I'm really not proud of this, but it works. Any cleaner suggestions would be appreciated.

  • 1
    All of that could be done with my answer using the event object from the function as far as I can tell
    – Eric
    Jul 14, 2017 at 17:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .