Lightning component: component visible event

Question

I have an aura component for case in service console. For every case tab opened, an instance of the component is created. I need a way to know when a component becomes "visible" or "active" (e.g. the case tab containing the component is opened or in focus). I couldn't find any aura event handler that fits my needs.

Thanks!

Answer 1

You can do that using a combination of TabFocused event and getEnclosingTabId method like this:

CMP :

<lightning:workspaceAPI aura:id="workspace" />
<aura:handler event="lightning:tabFocused" action="{! c.onTabFocused }"/> 

Controller:

onTabFocused : function(component, event, helper) {
    var focusedTabId = event.getParam('currentTabId');
    var workspaceAPI = component.find("workspace");
    workspaceAPI.getEnclosingTabId().then(function(tabId) {
        if(tabId === focusedTabId){
            // This means you have focused this component
        }
        console.log(tabId);
    }).catch(function(error) {
        console.log(error);
    });
}

Focused tab event gets triggered on all component instances, but the code inside your if will only execute if the current focused tab id is equal to your enclosed tab id. Which means you are focused on a component which is visble in current tab and not on other tabs.