August 27, 2020

How to Hyperlink a Parent Record in lightning:datatable?

Sample Code:

Component:


<aura:component implements="force:appHostable"
                   controller="ContactListController">
               
    <aura:attribute type="Contact[]" name="conList"/>
    <aura:attribute name="mycolumns" type="List"/>
   
    <aura:handler name="init" value="{!this}" action="{!c.fetchConts}"/>
   
    <lightning:datatable data="{! v.conList }"
                         columns="{! v.mycolumns }"
                         keyField="Id"
                         hideCheckboxColumn="true"/>
   
</aura:component>

Component Controller:

({
   
    fetchConts : function( component, event, helper ) {
       
        component.set('v.mycolumns', [
            { label: 'First Name', fieldName: 'FirstName', type: 'text' },
            { label: 'Last Name', fieldName: 'LastName', type: 'Text' },
            { label: 'Account Name', fieldName: 'linkName', type: 'url',
            typeAttributes: { label: { fieldName: 'AccountName' }, target: '_blank' } }
        ]);
        var action = component.get( "c.fetchContacts" );
        /*action.setParams({
        });*/
        action.setCallback(this, function( response ) {
           
            var state = response.getState();
            if ( state === "SUCCESS" ) {
               
                console.log( 'Success' );
                var records = response.getReturnValue();
                records.forEach( function( record ) {
                    record.AccountName = record.Account.Name;
                    record.linkName = '/' + record.Account.Id;
                });
                component.set( "v.conList", records );
               
            }
           
        });
        $A.enqueueAction( action );
       
    }

})

Apex Class:

public class ContactListController {
   
    @AuraEnabled
    public static List < Contact > fetchContacts() {
       
        return [ SELECT Id, FirstName, LastName, Account.Id, Account.Name FROM Contact LIMIT 10 ];
       
    }

}

Output:



No comments:

Post a Comment