2

In my footer component, I have the following:

<aura:attribute name="buttons" type="Aura.Component[]" />

... where I inject the buttons I want on the footer.

However I need to set onclick actions for these buttons. What's the right way to do this?

I suppose it is correct for my footer component to hold these actions and execute them. If so, how do I set the onclick attribute of those buttons on the footer's controller?

I've tried:

let buttons = component.get('v.buttons')

for (var button of buttons) {
    button.set('v.onclick', 'c.clickHandler')
}

... to no avail.

1
  • is this related to a custom aura template component needed in Experience cloud (community) ?
    – Shamina
    Commented Feb 22, 2022 at 17:48

2 Answers 2

5

You have to pass in a reference to the callback, and use addEventHandler, as in:

button.addEventHandler('eventName', component.getReference('c.clickHandler'));

The component must have an aura:registerEvent that matches eventName in order to make this work.

You can read more in the docs.

3
  • Thanks for the answer but, addEventHandler just handles an event that is fired. I'm stuck on the firing part. See, I'm providing lightning:buttons from a parent to a child component and these buttons come without an onclick handler because only the child component has/knows the method to be run when those buttons are clicked. I don't know how to add an onclick handler to those buttons. Commented Feb 11, 2022 at 11:23
  • Also, I noticed you said button.addEventHandler... but the link you attached only shows examples using cmp.addEventHandler.... When I try the former in my sandbox I get button.addEventHandler is not a function. I addEventHandler after everything has rendered. Commented Feb 11, 2022 at 11:29
  • @parsa_047Fletcher My apologies for missing your comments. button is just a placeholder. You can attach an event to any object you want that is a custom component. Standard HTML elements will still use addEventListener, in which case you specify a function (normally kept in a helper).
    – sfdcfox
    Commented Feb 22, 2022 at 20:24
4
+50

I first want to suggest to use LWC more than Aura. Aura is older and more or less deprecated or in the path to be. Also, in LWC, event handling (and almost everything) will be closer to standard javascript thus help will be easier to find.

Documentation given by @sfdcfox is correct and even more interesting is Handling Component Events.

So in Aura you need these steps:

  • Create a custom component event
  • Fire that custom event from your button component
  • Handle the custom event from the footer component

I hope this helps, feel free to comment.

3
  • It's not deprecated, per se, it still has specific purposes that LWC doesn't fill (e.g. Lightning Apps), but I agree in general one should use LWC when possible.
    – sfdcfox
    Commented Feb 22, 2022 at 20:22
  • That's why I said "more or less" and "in the path to be". Knowing Salesforce it might take 5-10 years looking at how long they took to remove classic from new orgs (and it is still present in old orgs). Obviously we can't completely avoid it today and we usually only have aura components as wrapper / proxy for LWC to ease the transition when possible. That's not the topic here so I think we should focus on the problem exposed. Commented Feb 23, 2022 at 8:56
  • 1
    "Archived" would be the proper term here imo. not deprecated, still supported, no longer developed.
    – glls
    Commented Feb 24, 2022 at 0:22

You must log in to answer this question.

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