[SalesForce] Can’t get attribute from clicking on a link in a lightning component

I have lightning component and a list of records I have to display.
For each record, I have to display a lightning button which trigger a method in the controller to fire another lightning component.

My problem is that I can't get the value of the attribute of the lightning button.

This is my code:

<aura:component controller="AssetsCtrl" implements="forceCommunity:availableForAllPageTypes" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="logements" type="Object[]" />

    <lightning:tabset variant="scoped">
        <aura:iteration items="{!v.logements}" var="aLogement">
            <lightning:tab label="{!aLogement.FullAddress__c}">
                <aura:if isTrue="{!not(empty(aLogement.Equipements__r))}">
                    <aura:iteration items="{!aLogement.Equipements__r}" var="anAsset">
                        <lightning:formattedText value="{!anAsset.Name}" /><br/>
                        <lightning:formattedText value="{!anAsset.Price}" /><br/>
                        <lightning:formattedText value="{!anAsset.InstallDate}" /><br/>
                        <lightning:formattedText value="{!anAsset.SerialNumber}" /><br/>
                        <a onclick="{!c.seeAssetDetail}" data-index="{!anAsset.Id}">See detail</a><br/><br/><br/>
                    </aura:iteration>
                    <aura:set attribute="else">
                        <lightning:formattedText value="{!$Label.c.NoAssetForThisLogement}" />
                    </aura:set>
                </aura:if>
            </lightning:tab>
        </aura:iteration>
    </lightning:tabset>
</aura:component>

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getLogements");
        action.setCallback(this, function(response) {
            var state = response.getState();
            console.log('state : ' + state);
            if (state === "SUCCESS") {
                var storeResponse = response.getReturnValue();
                console.log(storeResponse);
                component.set("v.logements", storeResponse);
            }
        });  

        $A.enqueueAction(action);
    },

    seeAssetDetail : function(component, event, helper) {
        console.log(event.currentTarget);
        var idx = event.currentTarget.getAttribute("data-index");
        console.log('idx : ' + idx);
        var navEvent = $A.get("e.force:navigateToSObject");
        if(navEvent){
            navEvent.setParams({
                  recordId: idx,
                  slideDevName: "asset-detail"
            });
            navEvent.fire(); 
        }
        else{
            window.location.href = '/s/asset-detail?assetId=' + idx;
        }
    }
})

In the method seeAssetDetail, the value of idx is NULL, can you tell me why please?

Best Answer

in the context of lightning, referencing id's in anchortags or href's is not recommended -

Lightning Components Developer Guide

Don’t hard code or dynamically generate Salesforce URLs in the href attribute of an tag. Use events, such as force:navigateToSObject or force:navigateToURL, instead.

WHY?

If you use # in the href attribute, a secondary issue occurs. The hash mark (#) is a URL fragment identifier and is often used in Web development for navigation within a page. Avoid # in the href attribute of anchor tags in Lightning components as it can cause unexpected navigation changes, especially in the Salesforce app. That’s another reason not to use href.

Also, In lightning communities, you will want to use -force:navigateToURL-

Navigate To Sobject is not supported in communities

This event is handled by the one.app container. It’s supported in Lightning Experience, the Salesforce app, and Lightning communities.

You will have to refactor that portion of your component and your seeAssetDetail method.

avoid using 'window.location.href' for navigating.

Related Topic