2

I have 3 components(I sincerely apologize for the extremely long code)

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}"/>
    {!v.body}
</aura:component>

The main component controller

({
    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);
        }
    }
    );
    }
})

The first Component called MyLightComponent

<aura:component controller="contactSearch" implements="force:appHostable" >
    <aura:attribute access="public" name="maxResults" type="Integer" default="10" />
    <!--<aura:registerEvent name="contactsFoundEvent" type="c:ContactsFound"/>-->
    <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.force:NavigateToContactDetail");
         var idx = event.target.getAttribute('data-index');
         var contact = component.get("v.contacts")[idx];
         if(navEvent){
             navEvent.setParams({
                  recordId: contact.Id,
             });
             navEvent.fire(); 
         }

    },
})

NavigateToContactDetail Event

<aura:event type="APPLICATION">

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

</aura:event>

The second Component-ContactDetailsLightningComponent

<aura:component implements="force:appHostable">
    <aura:attribute name="contactId" type="Id" />
    The result is {!v.contactId}
</aura:component>

The first component is being rendered from the main component, However when I click on the name link, it is not going to the ContactDetailsLightningComponent. Please tell me where am I going wrong. I am extremely new to lightning. Please Help!!!

2

The event 'NavigateToContactDetail' is custom application event created by you, so in the 'viewRecord' method of the 'MyLightComponentController' while firing the 'NavigateToContactDetail' you should be using the namespace as 'c' and not 'force', that is

try changing the following line

var navEvent = $A.get("e.force:NavigateToContactDetail");

to

var navEvent = $A.get("e.c:NavigateToContactDetail");
  • Nicely spotted. – pchittum Jul 6 '16 at 9:02

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.