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
AccountListTable.js
AccountListTable.html
Output
Note: If you want the same thing in classic console please refer my previous post
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
i'm getting 'No Base file for markup" when i'm trying this solution.
ReplyDelete