function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
shalini sharma 24shalini sharma 24 

dynamically creating multiple tabs inside for loop

Hi ,
I want to create multiple tabs dynamically. I am iteraring through for loop and inside for loop i am creating tab dynamically.
Below is the code:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
    <aura:attribute name="moretabs" type="Aura.Component[]"/>
        <lightning:tabset variant="scoped">
            <lightning:tab label="Item One">
                 Some content here
            </lightning:tab>
            {!v.moretabs}
        </lightning:tabset>
        <lightning:button label="Add tab" onclick="{!c.addTab}"/>
</aura:component>

CONTROLLER:
({
    addTab: function(component, event) {
        for(var i=0; i <4; i++){
        $A.createComponent("lightning:tab", {
            "label": "New Tab"+i,
            "id": "new",
            "onactive": component.getReference("c.addContent")
        }, function (newTab, status, error) {
            if (status === "SUCCESS") {
                alert('success');
                var body = component.get("v.moretabs[i]");
                component.set("v.moretabs[i]", newTab);
            } else {
                throw new Error(error);
            }
        });
    }
    },
    addContent : function(component, event) {
        var tab = event.getSource();
        switch (tab.get('v.id')){
            case 'new':
                $A.createComponent("lightning:badge", {
                    "label": "NEW"
                }, function (newContent, status, error) {
                    if (status === "SUCCESS") {
                        tab.set('v.body', newContent);
                    } else {
                        throw new Error(error);
                    }
                });
                break;
        }
    }
})

For some reason, my tabs are not gettiing created.
NagendraNagendra (Salesforce Developers) 
Hi Shalini,

Are you getting any error while creating the components dynamically?

Please turn the debug log on and then see if there is information

Also, I would suggest you please check with below link from the stack exchange community which might help you further. Please let us know still if you are facing the issue.

Mark this as solved if the reply was helpful.

Thanks,
Nagendra
shalini sharma 24shalini sharma 24
Hi Nagendra, i am not getting any error on UI or debug logs
Raj VakatiRaj Vakati
Hi Shalini , 

Here is the working copy of the code .
  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
    <aura:attribute name="moretabs" type="Aura.Component[]"/>
    <lightning:tabset variant="scoped">
        <lightning:tab label="Item One">
            Some content here
        </lightning:tab>
        <aura:iteration items="{!v.moretabs}" var="obj">
            
            {!obj}
        </aura:iteration>
        
    </lightning:tabset>
    <!-- Click button to create a new tab -->
    <lightning:button label="Add tab" onclick="{!c.addTab}"/>
</aura:component>
  
({
    addTab: function(component, event) {
        var detail = component.get("v.moretabs");
        var newlst =[];
        newlst.push(detail);
        console.log('1');
        for(var i=0; i <4; i++){
            
            $A.createComponent("lightning:tab", {
                "label": "New Tab"+i,
                "id": "new"+i
                // "onactive": component.getReference("c.addContent")
            }, function (newTab, status, error) {
                if (status === "SUCCESS") {
                    newlst.push(newTab);
                    component.set("v.moretabs", newlst);
                    console.log('2');
                    
                    //var body = component.get("v.moretabs");
                    //component.set("v.moretabs", newTab);
                } else {
                    throw new Error(error);
                }
            });
        }
    },
    addContent : function(component, event) {
        var tab = event.getSource();
        switch (tab.get('v.id')){
            case 'new':
                // Display a badge in the tab content.
                // You can replace lightning:badge with a custom component.
                $A.createComponent("lightning:badge", {
                    "label": "NEW"
                }, function (newContent, status, error) {
                    if (status === "SUCCESS") {
                        tab.set('v.body', newContent);
                    } else {
                        throw new Error(error);
                    }
                });
                break;
        }
    }
})