Lightning Experience is based on event-driven architecture. When a tab is focused, closed, or opened, there are standard handlers that Salesforce provides, which a component can handle.
The following table lists some of the events provided out of the box in the console API to detect changes to the tabs:
Event name | Component markup to handle events | Controller action on event handlers |
Lightning :tabClosed | <aura:component implements="flexipage:availableForAllPageTypes" access="global" > <aura:handler event="Lightning :tabClosed" action="{! c.onTabClosed }"/> </aura:component> |
({ onTabClosed : function(component, event, helper) { var tabId = event.getParam('tabId'); console.log("Tab closed: " +tabId"); } }) |
Lightning :tabCreated | <aura:component implements="flexipage:availableForAllPageTypes" access="global" > <Lightning :workspaceAPI aura:id="workspace" /> <aura:handler event="Lightning :tabCreated" action="{! c.onTabCreated }"/> </aura:component> |
({ onTabCreated : function(component, event, helper) { console.log("Tab created."); var newTabId = event.getParam('tabId'); var workspaceAPI = component.find("workspace"); workspaceAPI.setTabLabel({ tabId: newTabId, label: 'New Tab' }); }, }) |
Lightning :tabFocused | <aura:component implements="flexipage:availableForAllPageTypes" access="global" > <Lightning :workspaceAPI aura:id="workspace" /> <aura:handler event="Lightning :tabFocused" action="{! c.onTabFocused }"/> </aura:component> |
({ onTabFocused : function(component, event, helper) { console.log("Tab Focused"); var focusedTabId = event.getParam('currentTabId'); var workspaceAPI = component.find("workspace"); workspaceAPI.getTabInfo({ tabId : focusedTabId }).then(function(response) { console.log(response); }); } }) |
Lightning :tabRefreshed | <aura:component implements="flexipage:availableForAllPageTypes" access="global" > <Lightning :workspaceAPI aura:id="workspace" /> <aura:handler event="Lightning :tabRefreshed" action="{! c.onTabRefreshed }"/> </aura:component> |
({ onTabRefreshed : function(component, event, helper) { console.log("Tab Refreshed"); var refreshedTabId = event.getParam("tabId"); var workspaceAPI = component.find("workspace"); workspaceAPI.getTabInfo({ tabId : refreshedTabId }).then(function(response) { console.log(response); }); } }) |
Lightning :tabReplaced | <aura:component implements="flexipage:availableForAllPageTypes" access="global" > <Lightning :workspaceAPI aura:id="workspace" /> <aura:handler event="Lightning :tabReplaced" action="{! c.onTabReplaced }"/> </aura:component> | ({ onTabReplaced : function(component, event, helper) { console.log("Tab Replaced"); var replacedTabId = event.getParam("tabId"); var workspaceAPI = component.find("workspace"); workspaceAPI.getTabURL({ tabId : replacedTabId }).then(function(response) { console.log(response); }); } }) |
Lightning :tabUpdated | <aura:component implements="flexipage:availableForAllPageTypes" access="global" > <Lightning :workspaceAPI aura:id="workspace" /> <aura:handler event="Lightning :tabUpdated" action="{! c.onTabUpdated }"/> </aura:component> |
({ onTabUpdated : function(component, event, helper) { console.log("Tab Updated"); var updatedTabId = event.getParam("tabId"); console.log(updatedTabId); }, }) |