You need to sign in to do that
Don't have an account?
Madhurima 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
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
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: