function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Baylor Peak 2Baylor Peak 2 

Trying to make ID URL to link to the record via Aura Component?

Hello all.

I have an Aura Component that I want to make Fields linkable using 'url' via Javascript.

This is what I have so far:

({
	myAction : function(component, event, helper) {
        component.set("v.Columns", [
            {label:"Record ID", fieldName:"ID", type:"url",
             typeAttributes: {
                 label: {fieldName: "ID"},
                 target: '_self'
                 },
                 sortable: true
                 },
    {label:"First Name", fieldName:"FirstName", type:"text"},
    {label:"Last Name", fieldName:"LastName", type:"text"},
    {label:"Phone", fieldName:"Phone", type:"phone"}
]);
        
var action = component.get("c.getContacts");
action.setParams({
    recordId: component.get("v.recordId")
});
action.setCallback(this, function(data) {
    var contacts = data.getReturnValue();
    contacts.forEach(function(item) {
    item['URL'] = '/lightning/r/Contact/' + item['Id'] + '/view';
});
    component.set("v.Contacts", contacts);
});
$A.enqueueAction(action);
	}
})

I want the Record ID column to display the Contact ID and make that clickable so it takes you directly to the Contact record.

What am I missing please?

Devi ChandrikaDevi Chandrika (Salesforce Developers) 
Hi Baylor,
Try this code 
cmp

<aura:component controller="navitageToRecord" implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:appHostable" access="global" >
    
    <aura:attribute type="contact[]" name="conlist"/>
    <aura:attribute name="mycolumns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.fetchContacts}"/>
    
    <lightning:datatable data="{! v.conlist }" 
                         columns="{! v.mycolumns }" 
                         keyField="id"
                         hideCheckboxColumn="true"/>
</aura:component>

controller

({
   fetchContacts : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'contact Id', fieldName: 'linkid', type: 'url', 
            typeAttributes: {label: { fieldName: 'Id' }, target: '_blank'}},
            {label: 'firstName', fieldName: 'FirstName', type: 'text'},
            {label: 'LastName', fieldName: 'LastName', type: 'Text'},
            {label: 'Phone', fieldName: 'Phone', type: 'phone'}
        ]);
        var action = component.get("c.fetchRecords");
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var records =response.getReturnValue();
                records.forEach(function(record){
                    record.linkid = '/'+record.Id;
                });
                component.set("v.conlist", records);
            }
        });
        $A.enqueueAction(action);
    }
    
})

apex class
public class navitageToRecord {
    
@AuraEnabled
    public static List < contact > fetchRecords() {
        
        return [ SELECT Id, firstname, lastname,phone FROM contact ];
        
    }
}

Hope this helps you
If this helps kindly mark it as solved so that it may help others in future.

Thanks and Regards