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?

  • 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. – Martin Lezer Jan 9 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. – Aurélien Laval Jan 9 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. – Martin Lezer Jan 9 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? – Aurélien Laval Jan 10 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 – Aurélien Laval Jan 10 at 15:58
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.

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();
    }

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.