2

i have a lightning component which displays top 5 accounts.My requirement is ti when i click on a record i should navigate to detail page of the account.

I have written all the code and i can see the output. but when i click on the detail button of the record iam not able to navigate to detail page getting below error

Uncaught Action failed: c$LightningForceNavigateToSObjectItem$controller$gotoDetail [TypeError: Cannot read property 'setParams' of undefined] throws at https://varasales-dev-ed.lightning.force.com/auraFW/javascript/ot_aUc3gWVJCViXm5-AclQ/aura_prod.js:1:27
at Object.gotoDetail (components/c/LightningForceNavigateToSObjectItem.js:22:15)
at gotoDetail (components/c/LightningForceNavigateToSObjectItem.js:10:16)
at G.qc (https://varasales-dev-ed.lightning.force.com/auraFW/javascript/ot_aUc3gWVJCViXm5-AclQ/aura_prod.js:275:170)
at Array.c (https://varasales-dev-ed.lightning.force.com/auraFW/javascript/ot_aUc3gWVJCViXm5-AclQ/aura_prod.js:228:170)
at https://varasales-dev-ed.lightning.force.com/auraFW/javascript/ot_aUc3gWVJCViXm5-AclQ/aura_prod.js:265:155
at $.z.ab (https://varasales-dev-ed.lightning.force.com/auraFW/javascript/ot_aUc3gWVJCViXm5-AclQ/aura_prod.js:522:141)
at O.M (https://varasales-dev-ed.lightning.force.com/auraFW/javascript/ot_aUc3gWVJCViXm5-AclQ/aura_prod.js:264:81)
at Object.catchAndFireEvent (https://varasales-dev-ed.lightning.force.com/l/%7B%22mode%22%3A%22PROD%22%2C%22app%22%3A%22one%3Aone%22%2C%22fwuid%22%3A%22ot_aUc3gWVJCViXm5-AclQ%22%2C%22loaded%22%3A%7B%22APPLICATION%40markup%3A%2F%2Fone%3Aone%22%3A%22LTX5y5GOICnl_zeBOa0nnQ%22%7D%2C%22requestedLocales%22%3A%5B%22en_US%22%2C%22en%22%5D%2C%22ls%22%3A%22YN%22%7D/app.js:148:15)
at press (https://varasales-dev-ed.lightning.force.com/l/%7B%22mode%22%3A%22PROD%22%2C%22app%22%3A%22one%3Aone%22%2C%22fwuid%22%3A%22ot_aUc3gWVJCViXm5-AclQ%22%2C%22loaded%22%3A%7B%22APPLICATION%40markup%3A%2F%2Fone%3Aone%22%3A%22LTX5y5GOICnl_zeBOa0nnQ%22%7D%2C%22requestedLocales%22%3A%5B%22en_US%22%2C%22en%22%5D%2C%22ls%22%3A%22YN%22%7D/app.js:146:91)
at G.qc (https://varasales-dev-ed.lightning.force.com/auraFW/javascript/ot_aUc3gWVJCViXm5-AclQ/aura_prod.js:275:170)

Please find my code below:

main component:LightningForceNavigateTosObjectDemo

*

<aura:component controller="NavigateToSObjectDemoController" implements="force:appHostable">
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
     <aura:dependency resource="markup://force:navigateToSObject" type="EVENT"/>
    <div id="aura:page">
        <table cellpadding="0" cellspacing="0" class="auraTable">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th colspan="3"></th>
             </tr>
            </thead>
         <tbody>
            <aura:iteration items="{!v.accounts}" var="item" indexVar="index">
                <c:LightningForceNavigateToSObjectItem item="{!item}" index="{!index+1}"/>
            </aura:iteration>
            </tbody>
        </table>
    </div>


</aura:component>

*

its controller
({
    doInit : function(component, event, helper) {

        helper.getAccounts(component);

    }
})

its helper

({
    getAccounts : function(component, event, helper) {
        var action = component.get("c.getAccounts");
       action.setCallback(this, function(a){
       component.set("v.accounts", a.getReturnValue());
 });
        $A.enqueueAction(action);


    }})

its apex class NavigateToSObjectDemoController

public class NavigateToSObjectDemoController {
    @AuraEnabled
    public static List<Account> getAccounts() {
        return [SELECT Name from Account];
    } 
}

other component which is referred in main component LightningForceNavigateTosObjectItem

<aura:component >

    <aura:attribute name="item" type="account"/>
    <aura:attribute name="index" type="Integer"/>
    <tr>
        <td calss="indexCol">{!v.index}</td>
        <td>{!v.item.Name}</td>
        <td class="btnCol">
            <ui:button label="Detail" press="{!c.gotoDetail}"/>
        </td>
        <td class="btnCol">
            <ui:button label="Chatter" press="{!c.gotoChatter}"/>
        </td>
        <td class="btnCol">
            <ui:button label="Related" press="{!c.gotoRelated}"/>
        </td>
    </tr>
</aura:component>

its controller

({
    gotoDetail : function(component, event, helper) {
        helper.gotoDetail(component);
    },
    gotoChatter : function(component, event, helper) {
        helper.gotoChatter(component);
    },
    gotoRelated : function(component, event, helper) {
        helper.gotoRelated(component);
    }
})

its helper

({
    gotoDetail : function() {
        var navEvt=$A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId":component.get("v.item.id"),
            "slideDevName":"detail"
        });
        navEvt.fire();
    },
    gotoChatter : function() {
        var navEvt=$A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId":component.get("v.item.id"),
            "slideDevName":"chatter"
        });
        navEvt.fire();
    },
    gotoRelated : function() {
        var navEvt=$A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId":component.get("v.item.id"),
            "slideDevName":"related"
        });
        navEvt.fire();
    },
})

pls share thoughts

4
  • Look at this answer, it will help you out.
    – Praveen
    Jul 27, 2016 at 8:27
  • which section of code should i refer...I am not certain what is the problem in my code..pls help
    – vara
    Jul 27, 2016 at 8:52
  • we can access nested property Id using component.get("v.item.Id"). It would certainly work.
    – Praveen
    Jul 27, 2016 at 9:46
  • As Junaid pointed out, you are not passing the component to the helper method. Try printing the value of component.get("v.item.Id") in the browser log, to check if record Id is logged or not.
    – Praveen
    Jul 27, 2016 at 9:52

1 Answer 1

3

You have'nt given component as a parameter in functions defined in the helper.

So the whole helper should be modified as follows.

({
    gotoDetail : function(component) {
       var navEvt=$A.get("e.force:navigateToSObject");
       navEvt.setParams({
           "recordId":component.get("v.item.Id"),
           "slideDevName":"detail"
       });
       navEvt.fire();
   },
   gotoChatter : function(component) {
       var navEvt=$A.get("e.force:navigateToSObject");
       navEvt.setParams({
           "recordId":component.get("v.item.Id"),
           "slideDevName":"chatter"
       });
       navEvt.fire();
   },
   gotoRelated : function(component) {
       var navEvt=$A.get("e.force:navigateToSObject");
       navEvt.setParams({
           "recordId":component.get("v.item.Id"),
           "slideDevName":"related"
       });
       navEvt.fire();
   }})
4
  • thanks for the answer now getting error of Uncaught Action failed: one$centerStage$controller$handleDelegatedEvent [TypeError: Cannot read property 'substring' of undefined] throws at varasales-dev-ed.lightning.force.com/auraFW/javascript/…
    – vara
    Jul 27, 2016 at 9:35
  • @junaid-p-khader, we can access nested property Id using component.get("v.item.Id"). It would certainly work.Please correct it.
    – Praveen
    Jul 27, 2016 at 9:44
  • @junaid P Khader,praveen Thanks for the help it worked....appreciate ur help:)
    – vara
    Jul 27, 2016 at 9:53
  • @vara If this solves your issue, please mark it as the best answer. Jul 27, 2016 at 11:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .