0

I want to navigate to the Record Detail Page on click of a field in the LWC. How can I get the recordId in JS from Event. I am using event.detail in JS to get the record Id, but on print to console I see a value of "1" instead of Record Id.

calendarDailyTask.html

<template>
    <lightning-card title="Today's Tasks - Personal & Shared Calendar" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <!-- Show supervisor when bear is loaded -->
            <template if:true={calendarEvents.data}>

                    <template for:each={calendarEvents.data} for:item="calEvent">
                        <p key={calEvent.Id}>
                            <a href="www.salesforce.com"  key={calEvent.Id} onclick={handleClick}>{calEvent.Subject} </a>
                        </p> 
                    </template>

            </template>
            <!-- Data failed to load -->
            <template if:false={calendarEvents.data}>
                <div class="slds-text-color_error">
                   Nothing Due today today
                </div>
            </template>
        </div>
    </lightning-card>
</template>

calendarDailyTask.js

import { LightningElement, wire } from 'lwc';
import todayEvents from '@salesforce/apex/CalendarController.getTodayEvents';
import { NavigationMixin } from 'lightning/navigation';
export default class CalendarDailyTask extends NavigationMixin( LightningElement) {
    @wire(todayEvents)
    calendarEvents;

    navigateToRecordViewPage(eventRecordId) {
        // View a custom object record.
        console.log('eventId:'+eventRecordId);
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId :eventRecordId ,
                objectApiName: 'Event', // objectApiName is optional
                actionName: 'view'
            }
        });
    }

    handleClick(event) {
        // Stop the event's default behavior (don't follow the HREF link) and prevent click bubbling up in the DOM...
        event.preventDefault();
        event.stopPropagation();
        // Navigate as requested...        
        this.navigateToRecordViewPage(event.detail);

    }
}

Apex Controller

public with sharing class CalendarController {
    @AuraEnabled(Cacheable=true)
    public static List<Event> getTodayEvents(){
        List<Event> todayEvts = [select Id,Subject,ActivityDate,FORMAT(StartDateTime) StartTime,
                                 FORMAT(EndDateTime) EndTime from Event
                                 where ActivityDate = TODAY];
        return todayEvts;
    }
}
2
  • Welcome to SFSE! Tip: use the {} tool or select and press Ctrl-K to format your code.
    – David Reed
    Commented Nov 5, 2019 at 1:07
  • Thanks David for the correction.
    – Satish S
    Commented Nov 5, 2019 at 1:08

2 Answers 2

10

You can add data-attribute to your a tag like below

<a href="www.salesforce.com" data-record-id={calEvent.Id} onclick={handleClick}>{calEvent.Subject}</a>

And use event.target.dataset.recordId in your JS file to get the recordId like below:

handleClick(event) {
     // Stop the event's default behavior (don't follow the HREF link) and prevent click bubbling up in the DOM...
     event.preventDefault();
     event.stopPropagation();
     // Navigate as requested...        
     this.navigateToRecordViewPage(event.target.dataset.recordId);
}
3
  • Thanks Dibicor. This helps!!
    – Satish S
    Commented Nov 5, 2019 at 14:59
  • @dibocor I am trying to add this to my code <a href="www.salesforce.com" data-record-id={custObj.CreatedBy.Id} onclick={navigateToRecord}>{custObj.CreatedBy.Name}</a> but it never executes the navigateToRecord and if I check the DOM for the HTML I don't see onclick added to the element either. Something wrong with the way I am doing it?
    – Yogesh D
    Commented Aug 20, 2020 at 13:29
  • 1
    so removing href from the tag worked. If you keep href then it will ignore the onclick prop altogether
    – Yogesh D
    Commented Aug 20, 2020 at 13:46
1

A small update to already accepted answer by dibocor, I tried adding a hyperlink as per the answer and it didn't work for me.

I had to get rid of the href attribute altogether for LWC to persist the custom onclick routine. Not sure if this is a new behaviour or browser specific but thought I should put it here for someone who is in same situation in future.

<a onclick={navigateToRecord} data-record-id={record.CreatedBy.Id} title={record.CreatedBy.Name}>
  {record.CreatedBy.Name}
</a>

You must log in to answer this question.

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