1

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?

5
  • The best way to achieve this would be to create a new child lightning component called in each iteration. You'll be able to set an attribute using the equipment id. So when the link is clicked you'll be able to get the current value of the attribute. Jan 9, 2019 at 16:23
  • I think it is not the best solution because I need to load another web page to have an URL. I develop on a ligthning community.
    – Oupat
    Jan 9, 2019 at 16:49
  • Actually it is. This is how the lightning component framework was designed. The answer provided by @itzmukeshy7 might work but calling a new child component would be a more elegant solution. Jan 9, 2019 at 16:56
  • The redirection to anothercomponent works if I use a specific id but I can't get it from the attribute "data-index", it is all the time null, do you know why?
    – Oupat
    Jan 10, 2019 at 11:08
  • It works now, this is my final code: ´<lightning:button value="{!anAsset.Id}" onclick="{!c.goToAssetDetail}" label="See detail" />´ ´goToAssetDetail : function(component, event, helper) { var urlEvent = $A.get("e.force:navigateToURL"); urlEvent.setParams({ "url": "/s/asset-detail?assetId=" + event.getSource().get('v.value') }); urlEvent.fire(); }´ Thank you
    – Oupat
    Jan 10, 2019 at 15:58

3 Answers 3

1

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.

0

This data is available using dataset:

seeAssetDetail : function(component, event, helper) {
    console.log(event.currentTarget.dataset);
    var idx = event.currentTarget.dataset.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;
    }
}

More you can read about dataset here.

1
  • It doesn't work, I get any result :(
    – Oupat
    Jan 9, 2019 at 17:00
0

It works, this is my final code: ´´

goToAssetDetail : function(component, event, helper) {
        var urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({
          "url": "/s/asset-detail?assetId=" + event.getSource().get('v.value')
        });
        urlEvent.fire();
    }

You must log in to answer this question.

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