I am new to Lightning Web Components. I have a wrapper class that returns Accounts, Leads, and Contacts. I display those using lightning data table in my LWC. I want to navigate to a particular record by clicking on it. I used onRowAction
attribute of datatable and NavigationMixin
for navigation but it gives me page doesn't exist
error. Please guide. Also, can I use name in the form of hyperlink for navigation?
.
.
Javascript
import { LightningElement,api,track, wire } from 'lwc';
import getWrapperLis from '@salesforce/apex/WrapperClass.getWrapperList';
import { NavigationMixin } from 'lightning/navigation'; ///Navigation
const actions = [
{ label: 'View', name: 'show_details' },
];
const columns = [
{
type: 'action',
typeAttributes: {
rowActions: actions,
}
},
{ label: 'Label', fieldName: 'name', type:'text' },
{ label: 'Email', fieldName: 'email', type: 'email' , sortable:'true' },
{ label: 'Phone', fieldName: 'phone', type: 'phone', sortable:'true' },
{ label: 'MDM ID', fieldName: 'mdm', type: 'text' , editable:'true' },
];
export default class WrapperClassTestNavigation extends NavigationMixin(LightningElement) {
@api recordId;
@track columns = columns;
@wire(getWrapperLis,{lead:'$recordId'}) wrappers;
navigateToRecordViewPage(event) {
const row = event.detail.row;
// View a custom object record.
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: row.Id,
//objectApiName: 'Lead', // objectApiName is optional
actionName: 'view'
}
});
}
}
HTML
<template>
<lightning-card title="LWC Wrapper Component" icon-name="standard:contact">
<div >
<lightning-datatable
key-field="Id"
data={wrappers.data}
columns={columns}
hide-checkbox-column="true"
onrowaction={navigateToRecordViewPage}>
</lightning-datatable>
</div>
</lightning-card>
</template>
WrapperClass
public with sharing class WrapperClass {
@AuraEnabled(cacheable=true)
public static List<wrapp> getWrapperList(String lead) {
List<wrapp> wrapperList = new List<wrapp>();
for(Lead led : [SELECT Id, Name FROM Lead Where Id=:lead]){
wrapp obj = new wrapp(led);
wrapperList.add(obj);
}
for(Account acc : [SELECT Id, Name, Master_Customer_ID__c FROM Account Where Name LIKE:'%ac%' LIMIT 5]){
wrapp obj = new wrapp(acc);
wrapperList.add(obj);
}
for(Contact con : [SELECT Id, Name, Email, Phone FROM Contact Where Name LIKE:'%adam%' LIMIT 5]){
wrapp obj = new wrapp(con);
wrapperList.add(obj);
}
return wrapperList;
}
public class wrapp{
@AuraEnabled
public String id{get;set;}
@AuraEnabled
public String name{get;set;}
@AuraEnabled
public String phone{get;set;}
@AuraEnabled
public String email{get;set;}
@AuraEnabled
public String mdm{get;set;}
public wrapp(Account acct){
id = acct.Id;
name = acct.Name;
mdm = acct.Master_Customer_ID__c;
}
public wrapp(Contact cont){
id = cont.Id;
name = cont.Name;
phone = cont.Phone;
email = cont.email;
}
public wrapp(Lead lead){
id = lead.Id;
name = lead.Name;
}
}
}
Best Answer
I changed the javascript function to following and it worked: