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.

1 Answer 1

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.

1
  • Thanks David, I found the root cause of it is I set my URLs after I setup my attribute. Silly me. Thanks again Jul 7, 2020 at 2:34

You must log in to answer this question.

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