2

TL;DR Is there a way to capture / fire a lightning event to know a tab has changed when using the standard flexipage / lightning tabs component?

We're trying to design a reactive page that has components on the right hand side of the page become visible and not visible depending on the tab selected on the left. e.g. Component 1 only shows when Tab 1 is selected and Component 2 only shows when Tab 2 is selected.

enter image description here

We're trying to use the standard flexipage component "Tabs" and we'd like our custom aura components not to be nested inside of a parent component that implements lightning:tabset as these need to be used in different flexipage contexts.

An application event that is captured by the component on the right seems like the right way forward but getting an event to fire reliably is more difficult than expected.

What we've tried:

  • A standard component event (ui:tabsetEvent) is fired every time the tab is changed so I thought this could be captured and then re fired as an application event but this can't be used by non Salesforce components.
  • Using a javascript event listener with document.getElementsByClassName("tabs__item"). Presumably Lightning Locker is preventing this from working?
  • Nesting a component without any markup inside and using init / after render to trigger the event. This only works once due to the component not re-rendering when the tab is changed twice.
Improve this question

1 Answer 1

Reset to default
0

If you are willing to wait until at least Summer '20 for GA, you could use Ligthing Message Service.

Improve this answer
3
  • could you expand on how Lightning Message Service could help please as my understanding of LMS is that it is for cross technology communications?
    – will-bowditch
    Jan 15, 2020 at 9:48
  • I have a simillar requirement and would like to know how you have achieved yours ?
    – ssoundiran
    Jul 21, 2022 at 3:48
  • 1
    @ssoundiran the only way we managed to implement this was to drop our constraint around not being inside an aura component i.e. we had to have the tabs part of an LWC / aura rather than part of the flexipage. From there you attach DOM listeners to hook into when the tab is changed, then send an LMS to the component on the other side of the screen.
    – will-bowditch
    Sep 29, 2022 at 8:15

You must log in to answer this question.

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