Retrieve id for page reference for lightning navigation component

Question

I am a beginner in learn lightning. I am trying to create a custom component to display open cases on the home page for a user. Using onlick to open the respective record. But I am unable to retrieve the recordid for page reference. The logs shows undefined. Any suggestions?

Cmp:

<aura:component controller="getOpencaseapex" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId"  access="global">

    <aura:attribute name="casel" type="Case[]"/>
      <aura:attribute name="url" type="String"/>
     <aura:attribute name="pageReference" type="Object"/>
    <aura:handler name="init" value ="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="recordId" type="String" />
    <lightning:navigation aura:id="navService"/>
    <p> MY OPEN CASES</p>
    <aura:iteration items="{!v.casel}" var="cs">

        <div class="itemTitle body" data-id="{!cs.Id}" onclick="{!c.gotorecord}">
            <ul >
                <li >
                    <h3>{!cs.CaseNumber}</h3>

                </li>
                <li>
                    <ui:outputText value="{!cs.Status}" />
                </li>
            </ul>
        </div>
    </aura:iteration>
</aura:component>

JS:

({
    doInit : function(cmp, event, helper) {


        var action = cmp.get("c.opencase");

        console.log('calling doInit');

        action.setCallback(this, function(response) {
            var state=response.getState();
            if(state==="SUCCESS"){
                cmp.set("v.casel",response.getReturnValue());

                console.log('getting cases');
                console.debug(response.getReturnValue().length);
                console.log(response.getReturnValue());
            }
             else {
                console.debug(response.error[0].message);
             }


        });
        $A.enqueueAction(action);
    },
    gotorecord : function(cmp,event,helper) {

        var id = cmp.get("v.recordId");
        console.log(id);
        var navService = cmp.find("navService");

        var pageReference = {
            type: 'standard__RecordPage',
            attributes: {
                recordId:id,
                objectApiName: 'Case',
                actionName: 'view'
            }
        };
        cmp.set("v.pageReference", pageReference);
        console.log('@@',pageReference);

        var defaultUrl = "#";
        navService.generateUrl(pageReference)
            .then($A.getCallback(function(url) {
                cmp.set("v.url", url ? url : defaultUrl);
                console.log('@@url' ,v.url);
            }), $A.getCallback(function(error) {
                cmp.set("v.url", defaultUrl);
            }));




       var pageReference  = cmp.get("v.pageReference");
        event.preventDefault();
        navService.navigate(pageReference );

}
})

Answer 1

You should get the ID from the element:

gotorecord : function(cmp,event,helper) {
  var id = event.target.dataset.id;