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.
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.
- 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.