Navigating from one salesforce component to another

Question

I sincerely appologize for the very long code, I have been working on this for a really long time but it is still not working...Please help

I have 4 lightning components

The main Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="c:NavigateToContactDetail" action="{!c.NavigateComponent}"/>
    <aura:handler event="c:NavigateToAddMedicineComponent" action="{!c.NavigateMedicineComponent}"/>
        {!v.body}
</aura:component>

The MainComponentController

({
    doInit : function(component, event, helper) {
    $A.createComponent(
        "c:MyLightComponent",
    {

    },
    function(newCmp){
        if (component.isValid()) {
            component.set("v.body", newCmp);
        }
    });
    },

    NavigateComponent : function(component,event,helper) {
    $A.createComponent(
        "c:ContactDetailsLightningComponent",
    {
        "contactId" : event.getParam("recordId")
    },
    function(newCmp){
        if (component.isValid()) {
            component.set("v.body", newCmp);
        }
    });
    },

    NavigateMedicineComponent : function(component,event,helper) {
    $A.createComponent(
        "c:EnterMedicineDetailsLightningComponent",
    {
        "contactId" : event.getParam("recordId")
    },
    function(newCmp){
        if (component.isValid()) {

            component.set("v.body", newCmp);
        }
    });
    }
})

MyLightComponent

<aura:component controller="contactSearch" implements="force:appHostable" >
    <aura:attribute access="public" name="maxResults" type="Integer" default="10" />
    <aura:registerEvent name="navigate" type="c:NavigateToContactDetail"/>
    <aura:attribute name="contacts" type="Contact[]" />

    <div>
        <ui:inputText aura:Id="searchTerm" label="Contact Name"    placeholder="Enter a Contact Name"></ui:inputText>
        <ui:button label="Search" press="{!c.search}"></ui:button>
    </div>


<ul>
<aura:iteration items="{!v.contacts}" var="contact" indexVar="index">
    <li class="minli"> 
            <h3>
                <a onclick="{!c.viewRecord}" style="width:100%;" data-index="{!index}">{!contact.Name}</a>
            </h3>
        </li>
    </aura:iteration>
</ul> 
</aura:component>

MyLightComponentController

({
    search : function(component, event, helper) {
        helper.helperSearch(component,event);
        console.log('helper');
    },

    viewRecord : function(component, event, helper) {
         var navEvent = $A.get("e.c:NavigateToContactDetail");
         var idx = event.target.getAttribute('data-index');
         var contact = component.get("v.contacts")[idx];
         if(navEvent){
             navEvent.setParams({
                  recordId: contact.Id,
             });
             navEvent.fire(); 
         }

    },

})

MyLightComponentHelper

({
    helperSearch : function(component,event) {
        var searchText = component.find("searchTerm").get("v.value");
        var recordLimit = component.get("v.maxResults");
        var action = component.get("c.getContacts");

        action.setParams({
            searchTerm: searchText,
            maxResults: recordLimit

        });

       action.setCallback(this, function(data) {
        component.set("v.contacts", data.getReturnValue());
        });

        $A.enqueueAction(action);
       }
})

NavigateToContactDetailEvent

<aura:event type="APPLICATION">

<aura:attribute name="recordId" type="Id"/>

</aura:event>

ContactDetailsLightningComponent

<aura:component controller="contactSearch" implements="force:appHostable">
    <aura:attribute name="contactRows" type="Contact[]" />
    <aura:attribute name="contactId" type="Id" />
    <aura:registerEvent name="navigate" type="c:NavigateToAddMedicineComponent"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!--The result is {!v.contactId}-->
    <aura:iteration items="{!v.contactRows}" var="contact">
        <li class="minli"> <h3>{!contact.Name}</h3> </li>
        <li class="minli"> <h3>{!contact.Email}</h3> </li>
    </aura:iteration>
    <ui:button label="Add New Dose" press="{!c.insert}"></ui:button>
</aura:component>

ContactDetailsLightComponentController

({
    doInit : function(component, event, helper){
        helper.getContactDetails(component);
    },
        insert : function(component, event, helper) {
         var navEvent = $A.get("e.c:NavigateToAddMedicineComponent");
         var contactId = component.get("v.contactId");
         if(navEvent){
             navEvent.setParams({
                  recordId: contactId,
             });
             navEvent.fire(); 
         }

    },
})

ContactDetailsLightningComponentHelper

({
    getContactDetails : function(component, event, helper) {
        var contactId = component.get("v.contactId");
        var action = component.get("c.getAllDetails");
        action.setParams({
            contactId: contactId            
        });
        action.setCallback(this, function(a){
            component.set("v.contactRows", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

NavigateToAddMedicineComponent.evt

<aura:event type="APPLICATION">

<aura:attribute name="recordId" type="Id"/>

</aura:event>

EnterMEdicineDetailsLightningComponent

<aura:component controller="contactSearch">
    <aura:attribute name="contactId" type="Id" />
    <ui:inputText aura:Id="medicineName" label="Medicine Name"    placeholder="Medicine Name"></ui:inputText>
    <ui:inputText aura:Id="medicineDose" label="Medicine Dose"    placeholder="Medicine Dose"></ui:inputText>
    <ui:inputText aura:Id="medicineStartDate" label="Medicine Start Date"    placeholder="Medicine Start Date"></ui:inputText>
    <ui:button label="Save" press="{!c.insert}"></ui:button> 
</aura:component>

EntermedicineDetailsLightningComponentController

({
    insert : function(component, event, helper) {
        helper.helperInsert(component,event);
    }
})

EnterMedicineDetailsLightningComponentHelper

({
    helperInsert : function(component,event) {
        var medicineName = component.find("medicineName").get("v.value");
        var medicineDose = component.find("medicineDose").get("v.value");
        var medicineStartDate = component.find("medicineStartDate").get("v.value");
        var contactId = component.get("v.contactId");
        var action = component.get("c.insertMedicine");

        action.setParams({
            medicineName: medicineName,
            medicineDose: medicineDose,  
            medicineStartDate: medicineStartDate,              
        });

        $A.enqueueAction(action);
       }
})

The first two components are worning fine but the third component EnterMedicineDetailsLightningComponent is throwing an error. I am very new to lightning and I really need help

Id recommend making an [edit] to your question to remove the components which are working fine, and adding the error message from the component which throwing an exception. As it stands, this question is a wall of text, and no one will be able to reproduce or assist with the issues you are having. — battery.cord, Jul 06 '16 at 16:55
@GopalRao When I click on the Add New Dose button in component ContactDetailsLightningComponent it is not loading the the third component, EntermedicineDetailsLightningComponent — Rimii, Jul 07 '16 at 11:14
it is throwing the following error - Error in $A.getCallback() [ReferenceError: 'concole' is undefined] throws at https://madhurima2-dev-ed.lightning.force.com/auraFW/javascript/g_fD27ilRP19XS8vPQMspA/aura_prod.js:1:27................. — Rimii, Jul 07 '16 at 11:35
Are there any console.log statements in your flow, that you didn't include here ? looks like a typo, it should be 'console' instead of 'concole' somewhere. Just a guesss.. Otherwise the entire flow seems fine to me — Gopal Rao, Jul 07 '16 at 12:28
Actually that part was already fixed. My error message is the following uncaught rerender threw an error in 'markup://c:MainComp' [rerender threw an error in 'markup://aura:expression' [TypeError: Cannot read property 'childNodes' of null]] @GopalRao please help me if possible — Rimii, Jul 07 '16 at 17:15

Gopal Rao · Accepted Answer · 2016-07-08T15:53:16.587

I tried the code in my dev org and faced the same issue. This seems to be a framework's bug(regarding 'body' attribute), anyhow the same flow is working fine if we tweak the code a little bit and use a <div> to display the dynamically created component instead of using the 'body' attribute of the component Modified the MainComponent to :

<aura:component implements="force:appHostable" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="c:NavigateToContactDetail" action="{!c.NavigateComponent}"/>
    <aura:handler event="c:NavigateToAddMedicineComponent" action="{!c.NavigateMedicineComponent}"/>
    <div aura:id="testing"></div>
    <!--{!v.body}-->
</aura:component>

and the MainComponent controller as :

({
    doInit : function(component, event, helper) {
        $A.createComponent(
            "c:MyLightComponent",
            {
            },
            function(newCmp, status){
                if (status === "SUCCESS" && component.isValid()) {
                    component.find("testing").set("v.body", newCmp);
                    //component.set("v.body", newCmp);
                }
            });
    },

    NavigateComponent : function(component,event,helper) {
        $A.createComponent(
            "c:ContactDetailsLightningComponent",
            {
                "contactId" : event.getParam("recordId")
            },
            function(newCmp, status){
                if (status === "SUCCESS" && component.isValid()) {
                    component.find("testing").set("v.body", newCmp);
                    //component.set("v.body", newCmp);
                }
            });
    },

    NavigateMedicineComponent : function(component,event,helper) {
        console.log('Handling the event :NavigateMedicineComponent');
        $A.createComponent(
            "c:EnterMEdicineDetailsLightningComponent",
            {
                "contactId" : event.getParam("recordId")
            },
            function(newCmp, status){
                if (status === "SUCCESS" && component.isValid()) {
                    component.find("testing").set("v.body", newCmp);
                    /*var body = component.get("v.body");
                    console.log('body old');
                    console.log(body);
                    body.push(newCmp);
                    component.set("v.body", body);*/
                }
            }
        );
    }
})

Hope this works for you.

it is still throwing me the same error Uncaught rerender threw an error in 'markup://c:MainComp' [rerender threw an error in 'markup://aura:expression' [TypeError: Cannot read property 'childNodes' of null]] @GopalRao — Rimii, Jul 08 '16 at 04:30
The code seems perfectly fine. I will try this once in my dev org — Gopal Rao, Jul 08 '16 at 06:25
Thanks.. That would be really helpful. i am in dire need of this by today @GopalRao — Rimii, Jul 08 '16 at 06:48
I am getting the same error, tried various things but nothing seems to work. Could be a framework bug. Will post here if I find anything — Gopal Rao, Jul 08 '16 at 09:15
Modifying the current approach a little bit is serving the purpose, I'm editing the answer accordingly. — Gopal Rao, Jul 08 '16 at 13:14

Navigating from one salesforce component to another

1 Answers1

Linked