function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Madhurima Bhowmick 28Madhurima Bhowmick 28 

Navigating from one salesforce component to another

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 working fine but the third component EnterMedicineDetailsLightningComponent is throwing an error. I am very new to lightning and I really need help
 
Rowan  ChristmasRowan Christmas
  $A.createComponent(
            view.type,
            {
                "aura:id": "level1",
                "init_params": view.params
            },
            function(view){
                //Add the new button to the body array
                if (component.isValid()) {
                    var body = component.get("v.body");
                    body.push(view);
                    component.set("v.body", view);
                }
            });


See above, it looks like you need to push your new view onto the body, and/or make sure the body doesn't have a bunch of other stuff on it already.

Also you can make a single even to handle your nav like this:

 

<aura:event type="APPLICATION">
    <aura:attribute name="direction" type="String"/>
    <aura:attribute name="type" type="String"/>
    <aura:attribute name="params" type="String"/>

</aura:event>