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

  • Look at this answer, it will help you out. – Praveen Jul 27 '16 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 '16 at 8:52
  • we can access nested property Id using component.get("v.item.Id"). It would certainly work. – Praveen Jul 27 '16 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 '16 at 9:52
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();
   }})
  • 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 '16 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 '16 at 9:44
  • @junaid P Khader,praveen Thanks for the help it worked....appreciate ur help:) – vara Jul 27 '16 at 9:53
  • @vara If this solves your issue, please mark it as the best answer. – Junaid P Khader Jul 27 '16 at 11:36

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.