+ Start a Discussion
ANITHA BEEMUANITHA BEEMU 

can anyone help hyper link to product code in lightning

Hi,i have created a lightning components,where for one field i want a link to open to the record detail page..

my components:
<aura:component controller="WP_dRMA_SubProducts" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="gridColumns" type="List"/>
    <aura:attribute name="gridData" type="Object"/>
    <aura:attribute name="sku" type="string"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <lightning:accordion aura:id="accordion" activeSectionName="B">
        <lightning:accordionSection name="B" label="Sub Components">
            <lightning:treeGrid aura:id="subProdTreegridID" 
                                columns="{!v.gridColumns }"
                                data="{!v.gridData }"                               
                                keyField="KeyField"
             />
        </lightning:accordionSection>
    </lightning:accordion>
    
</aura:component>
my controller:
({
    doInit : function(cmp, event, helper){
        cmp.set('v.gridColumns',[
            {label:'Product Name', fieldName:'productName', type:'text'},
            {label:'Product Code', fieldName:'productCode',  type: 'url',
            typeAttributes: {label: { fieldName: 'productCode' },value:{fieldName: 'productCode'}, target: '_blank'}
               },            
        ]);
            
        helper.getSubProducts(cmp, event);            
    },
    
})
my helper:

({
    getSubProducts : function(cmp, event) {
        var skuVal = cmp.get('v.sku');
        var action = cmp.get('c.getRelatedProducts');
        action.setParams({sku:skuVal});
        action.setCallback(this,function(response){
            var state = response.getState();
            console.log('**state-->'+state);
            if(state === "SUCCESS"){
                var data = response.getReturnValue();
              // data.forEach(function(data){
                  //  data.productCode = '/'+data.Id;
               // });
                console.log('**data-->'+data);
                //JSON.parse(response.getReturnValue());                        
                //var temojson = JSON.parse(JSON.stringify(data).split('items').join('_children'));
                //console.log('**temojson-->'+temojson);
                for(var i=0;i<data.length;i++){
                    data[i]._children = data[i]['items'];
                    delete data[i].items;
                }
                console.log('**data after changing to _children-->'+data);
                cmp.set('v.gridData',data);
                //cmp.set('v.gridData',temojson);
                console.log('**gridData-->'+cmp.get('v.gridData'));
            }else if(state === "ERROR"){
                var errors = action.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log('**error Message-->'+errors[0].message);
                    }
                }
            }
        });            
        $A.enqueueAction(action);  
    }    
})
Pravin K YadavPravin K Yadav
Hi ANITHA,

You can follow below javascript controller code for showing hyper link on Product code field in datatable.
doInit : function(cmp, event, helper){
    cmp.set('v.gridColumns', [
        {label:'Product Name', fieldName:'productName', type:'text'},
        {label: 'Product Code', fieldName: 'productCode', type: 'url', typeAttributes: { target: '_self'}},
    ]);    
    helper.getSubProducts(cmp, event);            
},
I hope you find the above solution helpful. If it does, please mark it as Best Answer to help others too.

Thanks and Regards