How To Use HyperLink on Lightning Components

  • Instead of Button. I want hyperlink for Month and year.If user click that button I want to open particular visual force page.

    2.I want only 2 columns .each column should contains 3 row values

    <aura:component  controller="SalaryController" implements="force:appHostable,force:lightningQuickAction,flexipage:availableForRecordHome,flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="payDetail" type="Salary_Slips__c[]"/>
    <aura:attribute name="name" type="Salary_Slips__c[]"/>
    <center> <b>View Salary slip</b></center>
            <th> Month</th>
            <th>  </th>
        <aura:iteration items="{!v.payDetail}" var="pr">
                <td> {!pr.Month__c}{!pr.Year__c} </td> <br/>
                <td> <p><lightning:button variant="brand" label="SalarySlipGeneration" onclick="{!c.salarypageCall}" name="{!pr.Id}"  /></p></td> <br/>

        doInit : function(component, event, helper) {
            var action=component.get("c.salaryDetails");
                var state=re.getState();
                    alert('values @@@@@@@@@@@@@'+re.getReturnValue());
        salarypageCall: function(component, event, helper) {
            var myId = event.getSource().get('');
            var vfUrl = '' + myId;
            var urlEvent = $A.get("e.force:navigateToURL");
                "url": vfUrl

    public class SalaryController {
        public static List<Salary_Slips__c> salaryDetails(){
            return [select id,Month__c,Year__c from  Salary_Slips__c ORDER BY Month__c ASC];
  • Salesforce lightning aura framework is fully capable of supporting native html elements & handling the respective events.

    So if you want to use anchor tag and bind it to your event handler. You can do something like follows

    Component / App :

    <a href="javascript:void(0)" onclick="{!c.doSomething}">
                Click me to do Something 

    Controller.js :

       doSomething : function(component,event, helper) {
           console.log('Hey There .. the anchor was clicked');
           var href = event.srcElement.href;

    You will have access to events emitted during the onclick process as well.

    Sample Output:


    Thanks @StormBr34Ker, nicely written.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM