2

As per the documentation here: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_tabset.htm

I should be able to call injectComponent controller from handleActive controller. Irrespective how I try I get

Action failed: c:ParentAccountAttachmentsComponent$controller$handleActive [Cannot read property 'injectComponent' of undefined] Failing descriptor: {c:ParentAccountAttachmentsComponent$controller$handleActive}

Am I doing something wrong here? Or is this a documentation error?

The only I was able to do what I wanted was to use helper and call the injectcomponent controller in my helper to set the body.

Controller:

({
    handleActive: function (cmp, event,helper) {
        var tab = event.getSource();
         switch (tab.get('v.id')) {
            case 'accounts' :
                helper.injectComponent('c:attachdata', tab); 
                break;
            case 'cases' :
                helper.injectComponent('c:MyContactList', tab);
                break;
        }

    }
})

Helper:

({
 injectComponent: function (name, target) {
        $A.createComponent(name, {
        }, function (contentComponent, status, error) {
            if (status === "SUCCESS") {
                target.set('v.body', contentComponent);
            } else {
                throw new Error(error);
            }
        });
    }
})

This is the code that's failing in my dev org, I am copying the code from the documentation and pasting it as is, except the part where I change the component name in the injectcomponent controller:

Component :

<lightning:tabset variant="scoped">
    <lightning:tab onactive="{! c.handleActive }" label="Accounts" id="accounts" />
    <lightning:tab onactive="{! c.handleActive }" label="Cases" id="cases" />
</lightning:tabset>

Controller:

({
    handleActive: function (cmp, event,helper) {
        var tab = event.getSource();
        switch (tab.get('v.id')) {
            case 'SQW' :
                this.injectComponent('c:attachdata', tab);
                break;
            case 'general' :
                this.injectComponent('c:MycontactList', tab);
                break;
        }
    },
    injectComponent: function (name, target) {
        $A.createComponent(name, {
        }, function (contentComponent, status, error) {
            if (status === "SUCCESS") {
                target.set('v.body', contentComponent);
            } else {
                throw new Error(error);
            }
        });
    }
})
  • 1
    The documentation is correct. I replicated the logic from the documentation in my own org. Check your console for error messages. – sfdcfox Aug 14 '17 at 22:38
  • So I can call a controller from another controller then> I do not see any errors in the console :/ – Rao Aug 14 '17 at 23:15
6

You need to use a helper if you want to access related methods (via this). Your controller should look like this:

({
    handleActive: function(cmp, event, helper) {
        helper.handleActive(cmp, event, helper);
    }
})

The code you quoted as the controller should be the helper.

For reference, here is the exact code that I used in my org.

q188444a.app


<aura:application extends="force:slds">
        <lightning:tabset variant="scoped">
            <lightning:tab onactive="{! c.handleActive }" label="Accounts" id="accounts" />
            <lightning:tab onactive="{! c.handleActive }" label="Cases" id="cases" />
        </lightning:tabset>
</aura:application>

q188444aController.js


({
    handleActive: function(component, event, helper) {
        var source = event.getSource();
        switch(source.get("v.id")) {
            case "accounts":
                helper.injectComponent("c:q188444c1", source);
                break;
            case "cases":
                helper.injectComponent("c:q188444c2", source);
                break;
        }
    }
})

q188444aHelper.js


({
    injectComponent: function(name, target) {
        $A.createComponent(name, {}, function(component, status, error) {
            if(status === "SUCCESS") {
                target.set("v.body", component);
            } else {
                throw new Error(error);
            }
        });
    }
})

q188444c1.cmp


<aura:component >
    Placeholder for Component 1
</aura:component>

q188444c2.cmp


<aura:component >
    Placeholder for Component 2
</aura:component>

The documentation could be a little clearer, because the code structure itself implies that the code is all in the controller, but it is technically correct. I'll submit a request to have this clarified.

  • Got it fox, i was using helper method to access injectComponent controller, but the docs are a little misguiding with the usage of this variable. – Rao Aug 15 '17 at 3:30

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.