+ Start a Discussion
Chase MaldonadoChase Maldonado 

LWC navigate to record page not working

Hello,

I am new to development and I need some assistance.
Context: I am attempting to make a LWC that lives on the Home Page of our Org's App and lists a series of accounts in an accordion with related contacts nested in an additional accordion section. My code works so far, but now we need the lightning button listed on the contact to take the user when clicked to the appropriate Contact record page.

I have set up the Navigation but at first I was getting the error: "Cannot Find Page". So I attempted to pull the contact Id as it is listed in the button via data-key={con.Id} and feed that through the [NavigationMixin.Navigate] but now I receive a new error:  [Cannot read property 'dataset' of undefined]

We need the button to dynamically know what contact the button is being clicked from and direct the user to that contact's record page. Any help would be greatly appreciated! Also, apologies if the code is really muddy, I have been attempting many things to fix this and so there may be code that is not  needed.

HMTL:
<template>
    <lightning-card>
        <div class="slds-m-left_small">
            <div class="slds-text-heading_medium">
                <lightning-icon icon-name="standard:account" size="medium"></lightning-icon><strong> Client Accounts and Contacts</strong> 
            </div>
        </div>
        <template if:true={accounts}>
            <!-- accordion component with muliple sectio open -->
        <lightning-accordion allow-multiple-sections-open>
            <template for:each={accounts} for:item="acc" for:index="indexVar">
                <lightning-accordion-section key={acc.Id} name={acc.Name} label={acc.Name}>
                    <template for:each={acc.Contacts} for:item="con">
                        <lightning-accordion-section name={con.Name} label={con.Name} key={con.Id}>
                            {con.Title}
                            <lightning-button variant="brand" label="Go to Record" title="Primary action" onclick={navigateToObjectContact} class="slds-m-left_x-small" value={con.Id} name={con.Name} data-key={con.Id}></lightning-button>
                        </lightning-accordion-section>
                    </template>
                </lightning-accordion-section>
            </template>
        </lightning-accordion>
        </template>
    </lightning-card>
</template>

JavaScript:
import { api, LightningElement, track, wire} from 'lwc';
// importing apex class method to get the accounts
import retriveAccounts  from '@salesforce/apex/GetAccountContactData.getAccountData';
// imported to show toast messages
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
// imported to allow page navigation
import { NavigationMixin } from 'lightning/navigation';
export default class AccordinLWCDemo extends NavigationMixin(LightningElement) {
    @track accounts;
    @api title;
    @api greetings;
    @api recordId;
    navigateToObjectContact() {
        // Navigate to the Contact home page
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                        recordId: this.selectedRecordId,
                        objectApiName: 'Contact',
                        actionName: 'view',
            },
        });
        this.selectedRecordId = Event.target.dataset.key;
    }
    // wire service to fetch the slesforce data
    @wire(retriveAccounts)
    wiredAccount({ error, data }) {
        if(data) {
            this.accounts = data;
            this.error = undefined;
        }
        else if(error) {
            this.error = error;
            this.accounts = undefined;
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error!!',
                    message: error.message,
                    variant: 'error',
                }),
            );
        }
    }
}

Apex:
public with sharing class GetAccountContactData {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountData() {
        return [SELECT Id, Name ,(Select Id, Name, Email, Phone, Title from Contacts) from Account WHERE Active__c = TRUE AND RecordTypeId = '0122K000001Dio1QAC' ORDER BY Name];
    }
}
 
Best Answer chosen by Chase Maldonado
Yogendra JangidYogendra Jangid
Hello Chase, I see you are using Event to get the dataset but it is not in the function as parameter. Also befor passing selectedRecordId to your navigation, have this populated first. Please try using below code
navigateToObjectContact(event) {
        // Navigate to the Contact home page
        event.preventDefault();
        this.selectedRecordId = event.currentTarget.dataset.key;
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                        recordId: this.selectedRecordId,
                        objectApiName: 'Contact',
                        actionName: 'view',
            },
        });

    }
If this help you, can you please mark this as the best answer. Thanks.