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>
    
    <table>
        <tr>
            <th> Month</th>
            <th>  </th>
        </tr>
        <aura:iteration items="{!v.payDetail}" var="pr">
            <tr>
                <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/>
            </tr>
        </aura:iteration>
    </table>
    

    ({
        doInit : function(component, event, helper) {
            var action=component.get("c.salaryDetails");
            action.setCallback(this,function(re){
                var state=re.getState();
                if(state=='SUCCESS'){
                    alert('values @@@@@@@@@@@@@'+re.getReturnValue());
                    component.set("v.payDetail",re.getReturnValue());
                }
            });
    
            $A.enqueueAction(action);
        },
        salarypageCall: function(component, event, helper) {
            var myId = event.getSource().get('v.name');
            var vfUrl = 'https://empowerhrms-dev-ed--c.ap4.visual.force.com/apex/SalarySlipPage?Id=' + myId;
            var urlEvent = $A.get("e.force:navigateToURL");
            urlEvent.setParams({
                "url": vfUrl
            });
            urlEvent.fire();
    
        }
    })
    

    public class SalaryController {
        @AuraEnabled
        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 
    </a>
    

    Controller.js :

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

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

    Sample Output:

    Hyperlink

    Thanks @StormBr34Ker, nicely written.

License under CC-BY-SA with attribution


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