Show Hyperlink against the Record in Datatable in LWC
Requirements: Show the case records in the data table. when click on case number it will redirect to the detail page
Apex Class: showCaseRecordsinDatatable
public with sharing class showCaseRecordsinDatatable {
@AuraEnabled
public static list<case> fetchCases(){
try {
return [Select Id, subject,CaseNumber, Description, AccountID, Account.Name,ContactID, contact.Name,Status, priority from case];
} catch (Exception e) {
throw new AuraHandledException(e.getMessage());
}
}
}
--------Create LWC-------
<template>
<lightning-card variant="Narrow" title="Case List" icon-name="standard:case">
<div class="slds-m-around_small">
<lightning-datatable
key-field="id"
data={result}
show-row-number-column
hide-checkbox-column
columns={columnsList}
onrowaction={handleRowAction}>
</lightning-datatable>
</div>
</lightning-card>
</template>
------JS File-------
import { LightningElement,api } from 'lwc';
import fetchCases from '@salesforce/apex/showCaseRecordsinDatatable.fetchCases';
// adding the type attributes and cell attributes for hyperlink and priority icon
const columns = [
{label:'CaseNumber', fieldName:'caseUrl', type:'url',
typeAttributes: {
label:{
fieldName : 'CaseNumber'
},
target :'_blank'
}
},
{label:'Subject', fieldName:'Subject'},
{label:'Status', fieldName:'Status'},
{
label:'Priority', fieldName:'Priority',
cellAttributes: {
iconName:{
fieldName :'priorityIcon'
},
iconPosition :'left',
iconAlternativeText: 'Priority Icon'
}
},
{label:'Contact', fieldName:'ContactUrl', wrapText :true, type:'url',
typeAttributes :{
label :{
fieldName :'ContactName'
},
target :'_blank'
}
},
{label:'Account', fieldName:'AccountName', wrapText :true}
];
export default class CaseDatatable extends LightningElement {
@api result;
@api error;
columnsList = columns;
connectedCallback(){
this.getAllCaseDetails();
}
getAllCaseDetails(){
fetchCases()
.then(data =>{
//iterate each record if case assoicated with contact and account
// collect base url
let baseUrl = 'https://'+location.host+'/';
data.forEach(caseRec => {
caseRec.caseUrl = baseUrl+caseRec.Id;
if(caseRec.ContactId){
caseRec.ContactName = caseRec.Contact.Name;
caseRec.ContactUrl = baseUrl+caseRec.ContactId;
}
if(caseRec.AccountId){
caseRec.AccountName = caseRec.Account.Name;
}
// set Prioiry Icon based on Priority
if(caseRec.Priority === 'High'){
caseRec.priorityIcon = 'utility:log_a_call';
} else if (caseRec.Priority === 'Medium'){
caseRec.priorityIcon = 'utility:note';
} else if(caseRec.Priority === 'Low'){
caseRec.priorityIcon = 'utility:open';
}
});
this.result = data;
this.error= undefined;
})
.catch(error =>{
this.error= error;
window.console.log('error',error);
});
}
handleRowAction(){}
}
--------------Meta file-----------
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Case Details</masterLabel>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
</LightningComponentBundle>
output
Comments
Post a Comment