3

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

3

You should be able to do something like:

$A.createComponents("namespace:mycmp",{attribute:true}, 
    function(newTab){ 
        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? – Daniel Fuller Jul 16 '15 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. – Christian Carter Jul 17 '15 at 3:31
2

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

https://www.youtube.com/watch?v=TJVaTiYGUFI

The git has some code around how i did navigation

https://github.com/msrivastav13/Lightning-SPA-App

  • 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. – Daniel Fuller Jul 15 '15 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/… – Daniel Fuller Jul 15 '15 at 3:23
  • Mohith, what pattern are you using for hiding and showing the components in your app? – Daniel Fuller Jul 15 '15 at 19:26
  • use CSS Toggle .Add and remove classes .Check the github repo – Mohith Shrivastava Jul 15 '15 at 21:07

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.