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;
    }
}
  • Welcome to SFSE! Tip: use the {} tool or select and press Ctrl-K to format your code. – David Reed Nov 5 '19 at 1:07
  • Thanks David for the correction. – Satish S Nov 5 '19 at 1:08
5

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);
}
| improve this answer | |
  • Thanks Dibicor. This helps!! – Satish S Nov 5 '19 at 14:59

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.