First, I want to say I'm grateful for this community. Everyone has been a great help in my learning of the new Lightning framework.

I currently have an issue on the Lightning framework where I am trying to either append a previously built component to the body of a wrapper component or add a new component to the wrapper component as a facet. I am working off of the example provided here in the developer guide. The use case I have is that I have my application component. Within that, I have a header component that contains navbar tab links. When one of those tabs is clicked, I want to append the corresponding component to the body of the application under the header component and remove whatever component was previously there. My goal is to use this as a way of "navigating" between components using the navbar tabs.

In the developer guide example, it references that you can use syntax like component.set("v.body", newCmp) to append the newCmp to the body of the component currently in context within the function. However, I am unsure how you would reference or instantiate the newCmp object to begin with. For me, this newCmp object would not be a native Lightning component but would be a custom <aura:component> where I have a lot of custom markup and attributes entered.

Taking this same example, if the 'component' referenced in component.set("v.body", newCmp) is 'Component A' where the click event is firing on the navbar tab and the newCmp variable is 'Component B' that has no current link to 'Component A', how could I reference 'Component B' in the event handler of 'Component A' in order to append all of the body content of 'Component B' to the body of 'Component A'?

I know there is also the option of using $A.createComponents() to create components dynamically but I don't really need that since all of the markup of 'Component B' is already created as a Lightning resource.

For clarity, this is what I have so far. This is the fire event for a custom Lightning event where I am trying to perform this instantiation. It doesn't work as it is, but I just wanted to show it to give everyone a more clear understanding of what I am trying to do.

FireAddComponent : function(component, event, helper) {
    var eventSource = event.target;
    var eventSourceId = eventSource.id;
    if(eventSourceId === "homeTab"){
        Cmp.homeCmp homeCmp = new Cmp.homeCmp();
        var homeCmpBody = homeCmp.get("v.body");

Lightning Developer Guide Link Referenced in My Post: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cmp_body.htm


2 Answers 2


You should be able to do something like:

        if (cmp.isValid()) { 
            cmp.set("v.body", newTab); 

You can pass any component into createComponents, be it a standard component or one you created yourself!

  • That's what I was looking for! Is there any significance to adding the {attribute:true} that you have there? Commented Jul 16, 2015 at 10:50
  • Ah nope, it's just a placeholder for any attributes your component might have. For example, if your component took an id, you might call $A.createComponents("myorg:superaccount",{"accountId": someId},myCallbackFunction}. This is also a great place to remind you that you can define that callback in your helper and use it everywhere if you're always replacing v.body. Commented Jul 17, 2015 at 3:31

One of the approaches that I have been adopting is to have a Parent component thats parent to both Component A and component B and then you can fire off the event from any child component and handle the event in parent component which has access to both the child components and action of the event can access anything inside the parent component by using find

var child1 = component.find("detailView");

I am not sure this is right approach at this point but i built a sample app which worked well with this approach


The git has some code around how i did navigation


  • Thanks for the info! I was doing something similar before; however, my main concern was that if all of the components are referenced with in the parent component markup using <namespace: myComponent /> then all of the components will load and all doInit functions will fire when the application loads, even if the user has not performed a click event to show those components yet. Commented Jul 15, 2015 at 3:20
  • The link below is to another post where I discussed something similar. The main focus of the conversation was using the $A.createComponent() method. However, for more complex components, I don't know how difficult that would be to maintain, and it would seem more difficult than writing the normal markup and appending it if possible. salesforce.stackexchange.com/questions/81481/… Commented Jul 15, 2015 at 3:23
  • Mohith, what pattern are you using for hiding and showing the components in your app? Commented Jul 15, 2015 at 19:26
  • use CSS Toggle .Add and remove classes .Check the github repo Commented Jul 15, 2015 at 21:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .