0

I have a component and I want to have a clickable link into a single record page. My component is like this

<aura:component controller="Fleg_Ctrl" implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable,force:hasRecordId,flexipage:availableForRecordHome" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="Id" type="String" />    
    <aura:attribute name="lstCouponOnTime" type="Coupon__c[]" />
    <aura:attribute name="lstCouponSCHK" type="Coupon__c[]" />
    <aura:attribute name="lstCouponSC" type="Coupon__c[]" />
    <aura:attribute name="mapValues" type="Object" />
    <aura:attribute name="mycolumns" type="List" />
    <aura:attribute name="Spinner" type="boolean" default="false" />
    
    
    <h1> COUPONS</h1>
    <aura:if isTrue="{!v.Spinner}">
        <div class="demo-only demo-only demo-only_viewport demo--inverse" style="height:6rem">
            <div class="slds-spinner_container slds-is-fixed">
                <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
                    <span class="slds-assistive-text">Loading</span>
                    <div class="slds-spinner__dot-a"></div>
                    <div class="slds-spinner__dot-b"></div>
                </div>
            </div>
        </div>
    </aura:if>
    <div class="slds-grid slds-gutters">
        <div class="slds-col slds-size_1-of-3">
            <h2>List Record I</h2>
            <lightning:datatable data="{! v.lstCouponOnTime }"
                         columns="{! v.mycolumns }"
                         keyField="id"
                         hideCheckboxColumn="true"
                         onrowaction="{! c.handleRowAction }"/>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <h2>List Record II</h2>
            <lightning:datatable data="{! v.lstCouponSCHK }"
                         columns="{! v.mycolumns }"
                         keyField="id"
                         hideCheckboxColumn="true"
                         onrowaction="{! c.handleRowAction }" />
        </div>
        <div class="slds-col slds-size_1-of-3">
            <h2>List Record III</h2>
            <lightning:datatable data="{! v.lstCouponSC }"
                         columns="{! v.mycolumns }"
                         keyField="id"
                         hideCheckboxColumn="true"
                         onrowaction="{! c.handleRowAction }"/>
        </div>
    </div>
</aura:component>

This is the Controller

({
    doInit : function(component, event, helper) {       
        helper.getRelatedCoupons(component,event,helper);
    }
})

And this is the helper

({
    getRelatedCoupons : function(component,event,helper) {
        component.set("v.Spinner", true);
        component.set("v.mycolumns", [
            {label: 'Name', fieldName: 'Id', type: 'url', typeAttributes:{label:{fieldName: 'Name'}, target:'_self'}},
            {label: 'Status', fieldName: 'SC_Status__c', type: 'text'}
        ]);
        
        //alert('HELPER go HERE 1');
        var pageReference = component.get("v.pageReference");
        console.log('Page Ref helper: ',pageReference.state.c__flightLegId);        
        var flightLegId = pageReference.state.c__flightLegId;
        var action = component.get("c.getCoupons");
        action.setParams({
            flightLegId: flightLegId
        });
        
        action.setCallback(this,function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var result = response.getReturnValue();
                console.log('Coupons Result: ', result);
                var arrayMapKeys = [];
                for (var key in result){                    
                    arrayMapKeys.push({key : key, value : result[key]})                                      
                }
                component.set("v.mapValues", arrayMapKeys);                                
                component.set("v.lstCouponOnTime", result["CouponsOT"]);
                component.set("v.lstCouponSCHK", result["CouponsSCHK"]);
                component.set("v.lstCouponSC", result["CouponsSC"]);
                
                result["CouponsOT"].forEach(function(item){
                    item['Id'] = '/lightning/r/Coupon__c/'+ +item['Id']+'/view';
                });
                result["CouponsSCHK"].forEach(function(item){
                    item['Id'] = '/lightning/r/Coupon__c/'+ +item['Id']+'/view';
                });
                result["CouponsSC"].forEach(function(item){
                    item['Id'] = '/lightning/r/Coupon__c/'+ +item['Id']+'/view';
                });
                
                //remove loading screen
                component.set("v.Spinner", false);
            }else if(state === "INCOMPLETE"){
                component.set("v.Spinner", false);
                alert("INCOMPLETE");
            }else if(state === "ERROR"){
                component.set("v.Spinner", false);
                alert("INCOMPLETE");
            }
        });
        
        //alert('HELPER go HERE 2');
        $A.enqueueAction(action);
        
    }
})

My helper call apex function to return the Map <Id,List<Coupon__c>> as a result. And the component will display those as a datatables. I want to set the data row is clickable and navigate to a single Coupon__c record. However when I click to the data row, it redirect me to the page http://a101y000000clqoaa4/

Where did I go wrong ? I'm struggling on this one.

0

You have two separate issues here.

One is that you're not generating the URLs correctly:

item['Id'] = '/lightning/r/Coupon__c/'+ +item['Id']+'/view';

There's a spurious + sign (+ +item['Id']) that will yield invalid results.

Second, you're populating your attributes

            component.set("v.mapValues", arrayMapKeys);                                
            component.set("v.lstCouponOnTime", result["CouponsOT"]);
            component.set("v.lstCouponSCHK", result["CouponsSCHK"]);
            component.set("v.lstCouponSC", result["CouponsSC"]);

prior to finishing the setup of your data. You need to invert the order there: build out the data first, and then populate it into your attributes.

| improve this answer | |
  • Thanks David, I found the root cause of it is I set my URLs after I setup my attribute. Silly me. Thanks again – Trung Hieu Tran Jul 7 at 2:34

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.