4

I'm currently building a native dynamic data table in lightning (not using any 3rd party libraries). For some features of the table to work, I had to use application events because component events won't work since the components firing the events are in different branches than the components handling the events.

While the application events work, if I put another data table component onto the same lightning page, doing any action that relies on application events will also trigger the same action on the other instances of the data table component.

Anyone have any ideas on how to contain the application events?

  • What's the relationship of the firing component and the handling component? – sfdcfox Jan 5 '17 at 21:18
12

During the event bubble phase, use event.stopPropagation() to cause the component's root to be become the root node for the default phase. This means you'll need a handler at the top-level component to halt propagation beyond that component. See Application Event Propagation. It'll stop processing with the component that fired the event.

<aura:component ...>
<!-- root component -->
<aura:handler includeFacets="true" phase="bubble" name="c:appEvent" handler="{!c.containEvent}" />


// In controller
containEvent: function(component, event, helper) {
    event.stopPropagation();
}
  • Hi sfdcfox, I'm not exactly clear on what you mean by "This means you'll need a handler at the top-level component to halt propagation beyond that component." Right now, there is a checkbox in a column header component that when checked, fires an application event that is handled on each individual checkbox in the table (each cell is its own component). I essentially need it to be handled by every checkbox in one table, but not move on to the next table. I tried putting that code in the cell component, but if I add a phase (bubble or capture) to the handler, select all no longer works. – user3562811 Jan 5 '17 at 21:56
  • @user3562811 No, the code needs to be at the top level of your component hierarchy, not the cell. Let me write up a demo. – sfdcfox Jan 5 '17 at 21:57
  • ah yes I see now. works like a charm! Thanks sfdcfox! – user3562811 Jan 5 '17 at 22:03
  • @user3562811 Ah, good. I'll try and circle back with a demo for others to read up on later, though. Glad I could help! – sfdcfox Jan 5 '17 at 22:16
0

Give each table an ID, e.g. just an integer, as a new attribute. In the event, include a field for the ID of the table it is meant for.

Now when the event is fired it will still activate handlers in all the tables. However, at the start of the controller code you can check if the table ID in the event matches the ID of the component currently handling the event. If not, don't continue the handling.

  • Thanks for your response nicstella. That's very similar to what I tried doing. I added a table Id attribute in the design file of the top level component and then created an application event to capture it that fires when the table is initiated. I then added a handler in the component that registers the application event (in this case a select all event for checkboxes) which sets a data table Id attribute on that component. When the select all event fires, it stores the value of that attribute in the event. – user3562811 Jan 5 '17 at 21:34
  • Lastly, in the component that handles the select all event, I added the same handler in the previous component to this component to set the data table Id attribute. In the handler method for the select all event, I put in logic to only check the box if the event data table Id is equal to the data table id attribute on the component. This doesn't work though since the id attribute on the second component get's overridden by the other tables. I could pass that data table Id down to any component that needs it by setting it when the components are created. – user3562811 Jan 5 '17 at 21:34
  • However, I wanted to use an event instead because it's incredibly time consuming to pass the Id down through 7 levels of components. – user3562811 Jan 5 '17 at 21:34
  • If you post more code we can more easily understand the situation and give you more information on how to solve the problem: what component holds these tables, and what component sends this select all event? – nicstella Jan 5 '17 at 21:53

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.