Tuesday, December 3, 2019

Hyperlinks in Lightning-DataTable To Open The Record Detail Page In Classic(Non-Console) Or Lightning(Non-Console)

If your using <lightning-datatable> in html file to show the list of records and you want to provide an hyper link to open the record from the same table.

This can be done easily easing the  typeAttributes of lightning-datatable. Please use the below code snippet to display list of accounts with an option to open the account with hyperlink.This below code works only in Lightning(Console or Non-Console) and in Classic Non-Console applications.

Note: If you want the same thing in classic console as well please refer my previous post

GetAllAccountsCntrl.cls


public with sharing class GetAllAccountsCntrl {
   @AuraEnabled(cacheable=true)
    public static List<Account> getAllAccounts() {
        return [SELECT Id, Name,AccountSource,Website, Createddate FROM Account Limit 10];
    }

}

AccountListTable.js

import { LightningElement ,wire,track} from 'lwc';
import getAllOpps from '@salesforce/apex/GetAllAccountsCntrl.getAllAccounts';

export default class AccountListTable extends LightningElement {
    @track columns = [
        {
            label: 'Account Name',
            fieldName: 'nameUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'Name'}, 
            target: '_blank'},
            sortable: true
        },
        {
            label: 'Account Source',
            fieldName: 'AccountSource',
            type: 'text',
       
        },
  {
            label: 'Website',
            fieldName: 'Website',
            type: 'text',
        },
        {
            label: 'Close date',
            fieldName: 'closeDate',
            type: 'date',
        }

    ];

    @track error;
    @track listAccsData = [];


    @wire(getAllAccounts)
 wiredAllAccounts({ error, data }) {
        if (data) {
         
            this.listAccsData = data.map(record => Object.assign(
                { "nameUrl": '/'+record.Id},
                record
            ));
        
        }
        else if (error) {
            this.error = error;
            this.listAccsData = null;
          
        }
 }
}

AccountListTable.html

<template>
    <lightning-card  title="Account Details">
        <lightning-datatable data={listAccsData} columns={columns} key-field="Id"></lightning-datatable>        
    </lightning-card> 
</template>


Output






Note: If you want the same thing in classic console please refer my previous post

Hope this helps you..Enjoy..!

1 comment:

  1. i'm getting 'No Base file for markup" when i'm trying this solution.

    ReplyDelete