Salesforce Developer Community

Yogendra Jangid
NEWBIE
380 Points
Member since 2016

Chatter

Feed
12

Best Answers
0

Likes Received
1

Likes Given
2

Questions
75

Replies

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

Chase Maldonado
July 24, 2021
Like
0