2

I'm currently having an issue when trying to tabset with dynamic tabs. It appears that I need to use "aura:set" to set the label for each tab. When I do that though, I receive the oh so incredibly helpful "An internal server error has occurred Error ID: xxxxxxxxxxxxxxxx.

Exact Error Messages (Scroll right for error codes)

Error : [{"status":"SUCCESS","message":""},{"status":"SUCCESS","message":""},{"status":"ERROR","message":"An internal server error has occurred\nError ID: 2003145941-42295 (-1127739456)"},{"status":"SUCCESS","message":""},{"status":"ERROR","message":"An internal server error has occurred\nError ID: 2003145941-42296 (-1127739456)"},{"status":"SUCCESS","message":""},{"status":"ERROR","message":"An internal server error has occurred\nError ID: 2003145941-42297 (-1127739456)"}]

Here is a quick distillation of what I'm trying to do:

MyComponent.cmp

<aura:component description="TabSetExample">
    <aura:attribute name="horizontalTabs" type="Aura.Component[]" access="private"/>
    <aura:handler name="init" action="{!c.onInit}" value="this"/>
    {!v.horizontalTabs}
</aura:component>

MyComponentController.js

({
    onInit : function(component, event, helper) {
        helper.createTabset(component);
    }
})

MyComponentHelper.js

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

It appears as though the I'm unable to generate an "aura:set" component (is this actually a component?). If I can't generate the "aura:set" dynamically, does anyone know of a way to dynamically set the label of a "lightning:tab"? I've tried a String and an "aura:html" setup as a span, neither works.

  • 2
    You should always include the error number... It doesn't expose anything to the public, but can help people that know what's up how to troubleshoot the issue. – sfdcfox Apr 13 '17 at 19:58
  • It was part of the "Exact Error Messages" I posted at the bottom of the code snippets. – techbusinessman Apr 13 '17 at 20:00
  • 1
    Oops. Yeah, just noticed that, but I had to scroll to find it... – sfdcfox Apr 13 '17 at 20:01
  • Move the messages to the top so no need to scroll when others come by. – techbusinessman Apr 13 '17 at 20:02
6

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.

  • Omg, I feel dumb, this is easy and makes so much sense. bangs head against wall. – techbusinessman Apr 13 '17 at 20:07
  • @techbusinessman Yeah, I can't seem to get it quite working, but hopefully this gets you partway, no? – sfdcfox Apr 13 '17 at 20:12
  • Yes it does, thanks so much. I'll come back and update once it's working (thinking positive now!) – techbusinessman Apr 13 '17 at 20:13
  • Yeah, that's fine, the tabset works, it's the tabs that fail .... if you add the tab components to the tabset body then add the tabset body to horizonaltabs you'll see what I mean. The label attribute on tab is Component[]. – techbusinessman Apr 13 '17 at 20:21
  • 1
    @techbusinessman Yeah, dynamic Lightning is still a bit beyond me, but I was able to see the obvious error at least. Do feel free to edit this answer when you get it working :D – sfdcfox Apr 13 '17 at 20:26

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.