I have a basic custom component embedded in a Lightning App Case Record page, within the Service Console in LEX. What I'm trying to do is invoke some code whenever a tab is focused. The documentation suggests using the lightning:tabFocused
event for this. This is actually working, in the sense that the controller is able to handle the event, and will fire an alert/log when the tab is focused.
The issue is if I have n multiple tabs open - all of which are the same type of Lightning App Case Record page, just for different case records - the alert/log statement is executed n times, once per open tab.
I have set the alert to echo the tab ID (e.g. event.getParam('currentTabId')
). If there are say, 3 tabs open, then switching to a different tab will print the same tab Id 3 times, e.g. "ctab1" "ctab1" "ctab1".
I suspect that since all tabs are of the same type of Case Record page which has the custom component, there are n instances of the embedded custom component existing, so all n handlers are firing, using the focused tab as the event parameter.
If that is in the right direction, I'm looking for advice on a way to only invoke the handler logic once.
One possible solution that I cannot see a way of implemnting would be to have only a single handler for the lightning:tabFocused
event across all open tabs - but since all the tabs will be the same page type, I can't think of a way to achieve this. Another possible solution would be, in the controller, to compare the focusedTabId to the "current" tab, that is, the tab that that controller code is living in. However, the workspace API appears to only provide methods to get the current or focused tab across all tabs, not the tab in which the controller lives.
Component:
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<lightning:workspaceAPI aura:id="workspace" />
<aura:handler event="lightning:tabFocused" action="{!c.onTabFocused }"/>
</aura:component>
Controller:
({
onTabFocused : function(component, event, helper) {
console.log("Tab Focused");
var focusedTabId = event.getParam('currentTabId');
alert(focusedTabId);
var workspaceAPI = component.find("workspace");
workspaceAPI.getTabInfo({
tabId : focusedTabId,
callback : function(error, response){
console.log(response);
}
});
}
})