[SalesForce] Can’t dynamically change Label of lightning:tab

I need to dynamically change the label of a lightning:tab — without reloading the entire tab. I thought I could do it with normal data binding, but it's not working.

<aura:attribute name="tabName" type="String" default="defaultName"/>

<lightning:tabset>
    <lightning:tab id="example" label="{!v.tabName}"/>

When this loads, it displays "defaultName" as the name of the tab, so it's pulling the data value. However, when the controller changes the value for tabName, the tab label doesn't update.

Controller code…

component.set("v.tabName", "AnotherName");

I have pasted in {!v.tabName} elsewhere on the page, and the value is changing, but the tab label doesn't update.

Are tab labels unable to change dynamically?

Best Answer

Not all components respond to changes to bound attributes. In this case, you need to force a rerender, usually done via aura:if:

<aura:application extends="force:slds">
    <aura:attribute name="tabName" type="String" default="defaultName"/>
    <aura:attribute name="showTabs" type="Boolean" default="true" />
    <aura:if isTrue="{!v.showTabs}">
    <lightning:tabset>
        <lightning:tab id="example" label="{!v.tabName}"/>
    </lightning:tabset>
    </aura:if>

    <ui:button label="Update" press="{!c.update}" />
</aura:application>

({
    update : function(component, event, helper) {
        component.set("v.showTabs", false);
        component.set("v.tabName", "New label");
        setTimeout($A.getCallback(() => component.set("v.showTabs", true)));
    }
})

As unfortunate as this is, whenever you encounter a situation like this, the only viable solution is to reconstruct the components later.

Related Solutions

[SalesForce] Need to make second lightning:tab visible on button click

You can use "selectedTabId" attribute for this purpose.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="tabId" type="String" default="google" />
<lightning:tabset variant="scopped" selectedTabId="{! v.tabId }">

    <lightning:tab label="Google Search" id="google">
        Google Search
    </lightning:tab>

    <lightning:tab label="Yahoo" id="yahoo">
        <lightning:button variant="brand" label="Navigate To Google Tab" onclick="{! c.navigateToGoogleTab }" />
    </lightning:tab>        

</lightning:tabset>

Controller

({
    navigateToGoogleTab : function(component, event, helper) {
    component.set("v.tabId","google");
}
})

[SalesForce] How to change Lightning:Tab label dynamically

UPDATE

It turns out that the label attribute in lightning:tab is of type component[] and not text. And thus it was not being set in the first place when trying to set the label directly.

component.find("tabId").set("v.label", "New Value");

So to set the label, you will need to get the label component and then set the value attribute on it. Note that you will need to use aura:id instead of id as mentioned in the docs.

This will yield you the results.

// this returns the tab's label component as an array
var tabLabel = component.find("tabId").get("v.label");

// this was to verify, where is the label's value set.
// the 0-th element in the label component has an attribute value
console.log(tabLabel[0].get("v.value")); 

// once you change it, your new label will be rendered righ away
tabLabel[0].set("v.value", "New Label");

OLD ANSWER

While not completely sure about your use case, but re-rendering the tab will achieve for what you are looking for.

On Component, declare attributes as below:

<aura:attribute name="tabLabel" type="String" default="Old Label" />
<aura:attribute name="hasLabelChanged" type="Boolean" default="true" />

Then, use it as below to render the tab:

<aura:if isTrue="{!v.hasLabelChanged}">
    <lightning:tab label="{!v.tabLabel}" aura:id="tabId">
        Tab Contents here !
    </lightning:tab>
</aura:if>

And then in your JS, doing something will let you change the label.

component.set("v.hasLabelChanged", false);
component.set("v.tabLabel", "New Label");
component.set("v.hasLabelChanged", true);

Best Answer

Related Solutions

[SalesForce] Need to make second lightning:tab visible on button click

[SalesForce] How to change Lightning:Tab label dynamically

Related Topic