0

For the learning purpose I have created the component dynamically, but it is not working.

The code is as below:

TestApp.app

 <aura:application >
         <c:HomeCmp /> 
    </aura:application>

HomeCmp.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler value="{!this}" name="init" action="{!c.doInit}"/>
    Home Cmp...
    {!v.body}
</aura:component>

HomeCmpController.js

({
    doInit : function(component, event, helper) {
       $A.createComponent(
            "CTSPOCNEW:MessageCmp",
            {"msg" : "Welcome"},
            function(newCmp){
                if (component.isValid()) {
                    component.set("v.body", newCmp);
                }
            }
        );
    }
})

MessageCmp.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
    <aura:attribute name="msg" type="string" />
    <p>Hey.. {!v.msg} </p>
</aura:component>

and in the result I can see is only 'Home cmp...' text

The MessageCmp component is not getting added and there are no errors in console also.

Please tell me, what wrong did I do?

  • 1
    A minor thing is that you need {!v.msg}. I've also always assumed that body is an array so also component.set("v.body", [newCmp]);. Strongly suggest you include the status check that the examples include, at least doing a console.log of that. And it is well worth learning how to use your browser's JavaScript debugger which makes finding problems way faster. – Keith C May 9 '18 at 9:42
  • @Keith,i was planning to add answer but since you added it through comments i will pass it :) – RedDevil May 9 '18 at 9:59
  • tried {!v.msg} and component.set("v.body", [newCmp]); but still not working – Shilpa May 9 '18 at 10:03
  • OK. See my suggestion. – Keith C May 9 '18 at 10:08
  • Now it is working, it was because of this line "CTSPOCNEW:MessageCmp", the CTSPOCNEW is my domain name, it should be the namespace, if we don't have namespace we can use c: instead of the namespace. – Shilpa May 9 '18 at 11:16
1

I was unable to add component dynamically, because while passing the component name I was referring instance name instead of namespace, as shown in the below code.

$A.createComponent(
  "CTSPOCNEW:MessageCmp",

In the second line CTSPOCNEW is wrong, because it is an instance of org. I don't have a namespace, so we can use 'c' instead of the namespace.

$A.createComponent(

"c:MessageCmp",

The correct syntax is : [namespace Name]:[component Name] or c:[component Name]

And the rest of the above code is correct.

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.