How to link Lightning Components using events inside a Lightning App Builder page?

Question

I have a set of Lightning Components that I want to allow customers to assemble in different layouts and combinations inside the Lightning App Builder. These components interact: when a user clicks on a button in one component I need another component to react. But they do not contain each other.

This question has already been asked in Lightning Events in Lightning Page Context, but the suggested use of application events isn't working for me. Yes, firing and handling application events works fine when there is a single instance on the screen, but when there is more than one instance (e.g. console navigation is used), all instances respond to an event from any instance.

This screen shot illustrates the situation: there are multiple instances of the same Lightning App Builder page (IN-17-000299, IN-17-000298, IN-17-000297) on the screen at once and they each respond to each others events which is not what I want:

Is there a way to limit the scope of an application event in this Lightning App Builder context? Is there a pattern I can implement to separate out the events? Is there a better way to get the components to interact?

(This answer suggests an approach where the application event propagation is stopped at the container, but in this case I don't have control over the container.)

Answer 1

Application-level events certainly are what Salesforce recommends for the use case of components that will be "App Builder siblings" and need to talk to one another.

I think you won't be able to limit which components see the event, but you can limit which ones respond to it. If I understand correctly your "pitcher" and "receiver" are independent components you expect an end-user to be able to put on a page together and talk to one another.

For the use case where the admin has put multiple groups on the same page, maybe you could put a string identifier field on the component (call it a name, channel, key, what have you) and expose it to App Builder via Design. Then you would instruct admins, if there will be more than one interacting pair, please fill in the identifiers in matching pairs/groups so it knows who's who. In terms of implementation, every event you fire could include the identifier as an attribute so you can check for it.

For the console use case, you could include lightning:workspaceAPI in the components. On init, use getEnclosingTabId() and hold onto that (returns false if not in console tab). When firing an event, pass a "tab ID" attribute. When catching it, verify both the tab ID and the other identifier match.

Reference: https://developer.salesforce.com/docs/atlas.en-us.api_console.meta/api_console/sforce_api_console_lightning_getEnclosingTabId.htm

If you find any other use cases not covered by these, then just consider, is there something unique that you can use (or provide) to determine whether an instance is the wrong recipient?

Answer 2

I'm successfully using a combination of previous answers (workspaceAPI and unique names for components to limit publishers & subscribers).

In addition a simple pattern that works fine for some uses, especially for components on record pages is to have the component implement

force:hasRecordId

SFDC docs for the lightning interface

If the components should only listen to events related to a specific record, make that part of the event payload and let subscribers react accordingly. In the console, an alternative but similar approach when you want all your subtabs to listen to events to a primary tabs events, let the primary tab publish the records id in the event and have the subtabs simply check window.location if it contains the id-String. This has the advantage of working in lightning app pages which aren't record pages where the workspaceAPI for some reason currently does not work.

Answer 3

Have you tried stopPropagation()? Take a look at the following resource Application Event handling and limiting