How to change the tab label in Lightning Component

Are you working with Lightning Component (Aura) tab functionality?

Need to change your Tab label and Icon based on business logic?

Cool !!!

Now it’s not a big deal, we can do this kind of changes using WorkspaceAPI.

Let’s get started with the coding to change the label.

Component:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <lightning:workspaceAPI aura:id="workspace" />
    <lightning:button label="Set Focused Tab with Label" onclick="{! c.setFocusedTabLabel }" />
 </aura:component>

Controller:

({
    setFocusedTabLabel : function(component, event, helper) {
        var workspaceAPI = component.find("workspace");
        workspaceAPI.getFocusedTabInfo().then(function(response) {
            var focusedTabId = response.tabId;
            workspaceAPI.setTabLabel({
                tabId: focusedTabId,
                label: "Focused Tab"
            });
        })
        .catch(function(error) {
            console.log(error);
        });
    }
})

The wait is over check your UI, Now your label will be Focused Tab 🙂