You need to sign in to do that
Don't have an account?
shalini 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.
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.
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.
- http://reating multiple tabs dynamically by iterating over "for Loop
Please let us know still if you are facing the issue.Mark this as solved if the reply was helpful.
Thanks,
Nagendra
Here is the working copy of the code .