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.

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

  • could you expand on how Lightning Message Service could help please as my understanding of LMS is that it is for cross technology communications? Jan 15 '20 at 9:48

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.