[SalesForce] How to change Lightning:Tab label dynamically

I want to change label for tab dynamically, but that's not working.
Please find the related code below:

Component

<lightning:tab label="test1" id="tabId">

JS Controller

component.find("tabId").set('v.label', 'test2');

Can you help me with this?

Best Answer

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);

Related Solutions

[SalesForce] How to change label of button in lightning experience

This code will change the label of the clicked button.

c_UpdateUserTargetList : function(component, event, helper){
    action.setCallback(this, function(a) { 
        //var id=component.get("v.UTList.Id");
        if (a.getState() === "SUCCESS") {
            **//change button label here//**
            var source=event.getSource();
            source.set('v.label','New Label');
        } else if (a.getState() === "ERROR") {
            debugger;
            $A.log("Errors", a.getError());
        }
    });
}

How does it work?

There are two pieces to make this work.

The first is event. event contains the source element that fired the controller function. You can use this to get information about the button, and also update it.

var source=event.getSource();

The second piece sets the label.

source.set('v.label','New Label');

Note

I put these on two lines to show the two separate parts. If I was putting this in production I would put it on one line.

event.getSource().set('v.label','New Label')

[SalesForce] Salesforce Lightning: Dynamically Create Tabset/Tab

You can't initialize an aura:set component. It causes Bad Things to happen. The label attribute is a Component[] value so you need to create an aura:text component and then assign it to the label after component generation.

The code should look something more like this:

({
    createTabset: function(component) {
        var newComponents = [];
        newComponents.push(["lightning:tab", {
            "id" : "tab1",
            "title": "Tab 1"
        }]);
        newComponents.push(["aura:text",{
            "value" : "Tab 1"
        }]);
        newComponents.push(["lightning:tab", {
            "id" : "tab2",
            "title": "Tab 2"
        }]);
        newComponents.push(["aura:text",{
            "value" : "Tab 2"
        }]);
        newComponents.push(["lightning:tab", {
            "id" : "tab3",
            "title": "Tab 3"
        }]);
        newComponents.push(["aura:text",{
            "value" : "Tab 3"
        }]);
        $A.createComponents(newComponents,
            function (components, status, errorMessage) {
                console.log(errorMessage);
                if (component.isValid() && status === "SUCCESS") {
                    var tabs = [];
                    for(var i = 0; i < components.length; i++) {
                        if(i % 2 === 0) {
                            tabs.push(components[i]);
                        } else {
                            components[i-1].set("v.label", components[i]);
                        }
                    }
                    component.set("v.horizontalTabs", tabs);
                } else {

                }
            }
        );
    }
})

It appears you have to set the tab bodies before they'll render, or perhaps I'm missing something else, but at minimum, this no longer errors.

Best Answer

Related Solutions

[SalesForce] How to change label of button in lightning experience

[SalesForce] Salesforce Lightning: Dynamically Create Tabset/Tab

Related Topic