3

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 Answers 2

4

In case you want to add a hyperlink on the datatable row itself, refer the following:

Define the datatable column as shown below.

const columns = [ { label: 'Account Name', fieldName: 'accountIdForURL', type: 'url', typeAttributes: { label: { fieldName: 'Name' }, target: '_blank' } } ];

Fetch the data from apex and flatten it:

    //calling apex method and passing parameters
    @wire(getAccountContractData, { Id: '$recordId' }) wired(result) {
        if (result.data) {
                //create an array
                let accountContractArray = [];
                //add each row data in array using for loop
                result.data.forEach(accountContract => {
                    let accountContractRow = {};
                    accountContractRow.Name = accountContract.acc.Name;
                    accountContractRow.accountIdForURL = '/' + accountContract.acc.Id;  //This field will be used for navigation to the account
                    //You can add rest of the fields in similar way.
                    //push row into array
                    accountContractArray.push(accountContractRow);
                });
                //assign the array to variable which will store data to be shown in the datatable
                this.accountContractData = accountContractArray;
            
        }
    }

More information about flattening data.

HTML Code:

<div class="slds-table_col-bordered slds-table_bordered slds-table_striped slds-scrollable slds-m-top_xx-small">
                        <lightning-datatable key-field="id" data={accountContractData} columns={columns} hide-checkbox-column>
                        </lightning-datatable>
</div>

Edit the code as per your requirement.

3

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'
            }
        });
    }
3
  • 1
    A more cleaner approach could be navigate through label. Create it as href. Then you dont require row actions Oct 30, 2019 at 12:48
  • 1
    @Anshul can you explain it more in detail?
    – Edmondo
    Nov 3, 2020 at 18:06
  • 1
    @Edmondo1984 I have posted another answer explaining how to create a link.
    – Koustubh
    Nov 5, 2020 at 6:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .