0

I need to open the detail page of the record on click of hyperlink in my component.But it is not working. Can you pls check what am I missing here.

Here is my Code-

APEX Method -

@AuraEnabled
    public static List<Announcements__c> getTrainingDetails() {
        String year = String.valueOf(Date.today().year());
        Integer monthNum = Date.today().month();
        System.debug(monthNum);
        List<Announcements__c> A = [SELECT Id, Training_Name__c, Training_Date__c,RecordTypeId
                                   FROM Announcements__c where RecordType.name ='Trainings'];

        List<Announcements__c> todayList= new List<Announcements__c>();
        for(Announcements__c TrainingRecord :A)
        {
            if(TrainingRecord.Training_Date__c >= date.today()){
                todayList.add(TrainingRecord);
            }
        }
          return todayList;  
        }

Aura Component-

<aura:component controller="ctrl" implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global" >
    <aura:attribute name="recId" type="String"/>
    <aura:attribute name="Training" type="Announcements__c[]"/>
    <aura:handler name="init" value="{!this }" action="{! c.init }"/>

    <lightning:card class="slds-text-heading_Medium" iconName="utility:announcement" title="Upcoming Training Announcement">

        <aura:iteration items="{!v.Training}" var="Training">

            <div class="slds-p-top_xx-large">

            <p class="slds-p-horizontal_Small">
                <a data-Trainingid="{!Training.Id}" onclick="{!c.handleClick}">
             {!Training.Training_Name__c}
                </a>

            </p>
            <p class="slds-align_absolute-right ">
             {!Training.Training_Date__c}
            </p>
            </div>
        </aura:iteration>
    </lightning:card>

</aura:component>

Aura Js controller-

({
    handleClick : function(component, event, helper) {
           var recordId = event.target.dataset.Trainingid;

            var sObectEvent = $A.get("e.force:navigateToSObject");
                sObectEvent.setParams({
                    "recordId": recordId,
                    "slideDevName": "detail"
                });
                sObectEvent.fire();
    }
})

1 Answer 1

2

When you use uppercase letters in a dataset value, the name is transformed by certain rules. As such:

<a data-Trainingid="{!Training.Id}" onclick="{!c.handleClick}">

Would be accessed as:

event.target.dataset.trainingid

It's generally a Bad Idea to use uppercase letters in the HTML attribute to avoid this kind of confusion, as well as the fact that the specification for this feature prohibits this type of name (the LWC compiler will actively reject attributes styled this way, but Aura does not). You can read more about this behavior in the documentation for HTMLOrForeignElement.dataset.

The name of a custom data attribute in HTML begins with data-. It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_) -- but NOT any ASCII capital letters (A to Z).

Consider using:

<a data-training-id="{!Training.Id}" onclick="{!c.handleClick}">

Which is then accessed via:

event.target.dataset.trainingId

You must log in to answer this question.

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