4

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.

  • is your component inside /one/one.app container ? – Praveen Jul 5 '16 at 8:22
  • It is within a aura component – Rimii Jul 5 '16 at 9:51
  • are you using the aura:component in SF1 or Lightning Experience(in record detail page) or Standalone App? – Praveen Jul 5 '16 at 9:53
  • It is a stand alone app – Rimii Jul 5 '16 at 9:59
  • I have posted the answer.Please check it out. – Praveen Jul 5 '16 at 10:26
3

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';
    },

})
  • I tried your approach, it is still throwing me an error. it is throwing an error in salesforce 1 as well.. Help!! – Rimii Jul 5 '16 at 10:49
  • can you update the question with the code you tried? – Praveen Jul 5 '16 at 11:49
  • I have updated the question. It is not being visible yet. Hopefully it would be visible soon @Praveen – Rimii Jul 5 '16 at 11:58
  • @Rimii I have updated the answer. – Praveen Jul 5 '16 at 12:18
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.

  • this won't work outside of one/one.app container – Praveen Jul 5 '16 at 9:43
  • It will work in lightning. – Tushar Sharma Jul 5 '16 at 10:03
  • if you use it an Standalone App, var navEvent = $A.get("e.force:navigateToSObject"); returns undefined – Praveen Jul 5 '16 at 10:05
  • It is throwing undefined error. Is there any other way to do this? – Rimii Jul 5 '16 at 10:16
  • @Rimii you need to check what i undefined here. maybe you are not getting sobject here. – Tushar Sharma Jul 5 '16 at 10:56

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.