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; 
        }
    }
}
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'
            }
        });
    }
| improve this answer | |
  • 1
    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
  • 1
    @Anshul can you explain it more in detail? – Edmondo1984 Nov 3 at 18:06
  • 1
    @Edmondo1984 I have posted another answer explaining how to create a link. – Koustubh Nov 5 at 6:27
1

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.

| improve this answer | |

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.