2

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?

Lightning Web Component Lightning Data Table

.

Error Error

.

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; 
        }
    }
}
2

I changed the javascript function to following and it worked:

navigateToRecordViewPage(event) {
        this.record = event.detail.row;
        // View a custom object record.
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.record.id,
                //objectApiName: 'Lead', // objectApiName is optional
                actionName: 'view'
            }
        });
    }
  • A more cleaner approach could be navigate through label. Create it as href. Then you dont require row actions – Anshul Agrawal Oct 30 '19 at 12:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.