Creating a link to a contact in aura component

Question

I have the following code in aura component

<aura:component controller="contactSearch" implements="force:appHostable" >
    <aura:attribute access="public" name="maxResults" type="Integer" default="10" />
    <aura:attribute name="contacts" type="Contact[]" />
<ul>
<aura:iteration items="{!v.contacts}" var="contact">
    <li class="minli"> <h3><a onclick="{!c.navigateToRecord}" style="width:100%;"> {!contact.Name}</a></h3> </li>
</aura:iteration>
</ul>

In the ComponentController I have

({
       navigateToRecord : function(component, event, helper) {
         var navEvent = $A.get("e.force:navigateToSObject");
         if(navEvent){
             //console.log(component.get("v.contacts").Id);
             navEvent.setParams({
                  recordId: component.get("v.contacts").Id,
                  slideDevName: "detail"
             });
             navEvent.fire();   
         }
         else{
            //window.location.href = '/one/one.app#/sObject/'+component.get("v.contacts").Id+'/view'
         }
    }
})

What I want is to redirect to the Detail page of the Controller whose name is clicked

I want to add a link to the contact in the contact name
Can anyone tell me how to do that?
I am very new to lightning and any help would be appreciated.

Answer 1

If your component runs in one/one.app container(SF1 or LEX - Record Detail page ), Tushar Sharma's solution will work for you, because the it is handled by the one/one.app itself.

Below is the statement on the doc:

e.force:XXX event is handled by the one.app container. It’s supported in Lightning Experience and Salesforce1 only. If used outside of Lightning Experience or Salesforce1, this event won’t be handled automatically. To use this event outside of one.app, create and wire up an event handler of your own.

One approach is that,just check whether the e.force:navigateToSObject is available or not(which won't inside a standalone app), and switch the navigation logic.

Component:

<aura:component controller="contactSearch" implements="force:appHostable" >
    <aura:attribute access="public" name="maxResults" type="Integer" default="10" />
    <aura:attribute name="contacts" type="Contact[]" />
    <ul>
    <aura:iteration items="{!v.contacts}" var="contact indexVar="index">
        <li class="minli"> 
            <h3>
                <a onclick="{!c.navigateToRecord}" style="width:100%;" data-index="{!index}">{!contact.Name}</a>
            </h3>
        </li>
    </aura:iteration>
    </ul>
</aura:component>

Controller:

({
    navigateToRecord : function(component, event, helper) {
        var idx = event.target.getAttribute('data-index');
        var contact = component.get("v.contacts")[idx];
        var navEvent = $A.get("e.force:navigateToSObject");
        if(navEvent){
            navEvent.setParams({
                  recordId: contact.Id,
                  slideDevName: "detail"
            });
            navEvent.fire(); 
        }
        else{
            window.location.href = '/one/one.app#/sObject/'+contact.Id+'/view'
        }
    }
})

Another approach is, you can wire up an event handler of your own for the e.force:navigateToSObject, like this:

Component:

<aura:component controller="contactSearch" implements="force:appHostable" >
    <aura:attribute access="public" name="maxResults" type="Integer" default="10" />
    <aura:attribute name="contacts" type="Contact[]" />
     <aura:handler event="force:navigateToSObject" action="{!c.navigateToRecord}"/>
    <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>

Controller:

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

    },
    navigateToRecord : function(component, event, helper) {
        var recordId = event.getParam("recordId");
        window.location.href = '/one/one.app#/sObject/'+recordId+'/view';
    },

})

Answer 2

You can do something like this in Lightning.

<aura:component >
    <aura:attribute name="contact" type="contact" required="true" />
    <a onclick="{!c.navigateToRecord}" style="width:100%;"> 
        View Record
    </a>
</aura:component>

redirectToSobject Controller

({
    navigateToRecord : function(component, event, helper) {
         var navEvent = $A.get("e.force:navigateToSObject");
         navEvent.setParams({
              recordId: component.get("v.contact").Id,
              slideDevName: "detail"
         });
         navEvent.fire(); 
    }
})

So basically you can use e.force:navigateToSObject to redirect to detailpage.