I am bout to create an dynamic vertical tabbar which gets its content from a query later on. This turns out to be an issue as the aura:iteration seems to be not filled at the point of time the init event is triggered.

Basically I have my VerticalTabs element, which shows the content via {!v.body}

<div class="slds-vertical-tabs">
    <ul class="{!'slds-vertical-tabs__nav '+ (v.showHeader?'':'slds-hide')}" role="tablist" aria-orientation="vertical">

The tab structure is defined via a VerticalTab component

<div class="{#'slds-vertical-tabs__content slds-'+ (v.index==0?'show':'hide')}" id="{#'slds-vertical-tabs-' + v.index}" role="tabpanel" aria-labelledby="{#'slds-vertical-tabs-' + v.index + '__nav'}" aura:id="verticalTab">
    <div class="slds-text-longform">
        <aura:if isTrue="{#showTitle}">
            <h3 class="slds-text-heading_medium">{#v.title}</h3>

based on the body, I want to dynamically create the tabbar header. This is to be done dynamically via the controller iterating over the body:

init : function(component, event, helper) {
        console.log("init VerticalTabs");
        var body = component.get("v.body");
        var barComponents = [];
        for (var i=0, len = body.length; i<len; i++) {
            var title = body[i].get("v.title");
            body[i].set("v.index", i);
            barComponents.push(["aura:html", {
                "tag": "li",
                "HTMLAttributes": {
                    "title": title,
                    "class": "slds-vertical-tabs__nav-item " + (i==0?'slds-is-active':''),
                    "role": "presentation"
            barComponents.push(["aura:html", {
                "tag": "a",
                "body": title,
                "HTMLAttributes": {
                    "class": "slds-vertical-tabs__link",
                    "role": "tab",
                    "tabindex": (i==0?"0":"-1"),
                    "aria-selected": (i==0?"true":"false"),
                    "aria-controls": "slds-vertical-tabs-" + i,
                    "id": "slds-vertical-tabs-"+ i +"__nav",
                    "onclick": component.getReference("c.changeTab")
        if (len > 1)
            component.set("v.showHeader", true);
        $A.createComponents(barComponents, function (components, status, errorMessage) {
            if (status === "SUCCESS") {
                var navbar = [];
                for (var i=0, len = components.length; i<len; i+=2) {
                    components[i].set("v.body", components[i+1]);
                component.set("v.header", navbar);
            else {
                //this.displayToast("Error", "Failed to create list components.");

next part is loading the vertical tabs via a wrapping component:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="test" type="Object[]" />

        <aura:iteration items="{!v.test}" var="q">
            <c:VerticalTab title="{!q}">

But it does look like this data is loaded after the initial init of the body. Due to the nature of aura:iteration it looks like the body does not get updated and I cannot receive the loaded verticalTab. This results in nothing being displayed.

Is there a more proper way of dynamically creating the content? How can I build my dynamic tabs? If I hard-code the VerticalTabs it is working flawless. Otherwise, it does not recognize the change in the v.body :/



issue solved by forcing a re-render through

<aura:if isTrue="{!v.test.length>0}">
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.