4

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.

enter image description here

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);    
            }
        }); 
    }
})
  • Share the custom component complete code as well if any. – itzmukeshy7 Dec 7 '17 at 6:18
  • @itzmukeshy7 that is the complete code, I've trimmed it down to that, to isolate the behavior - the issue is producible with the above component and controller. In the screenshot, the component is not shown, it's a little under where I took the screenshot - but it can't be seen on the UI, anyway – Brian Mansfield Dec 7 '17 at 15:50
4

It turns out there is a getEnclosingTabId() method that's not listed in the top level of the workspace API methods.

I ended up adding logic comparing the enclosing tab to the focused tab, like so:

var focusedTabId = event.getParam('currentTabId'); 
var workspaceAPI = component.find("workspace"); 
workspaceAPI.getEnclosingTabId().then(function(tabId) {
  if (focusedTabId == tabId) {
    System.debug('The current tab is the one being focused!');
  }
})
.catch(function(error) {
  console.log(error);
});

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.