[SalesForce] 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];
    }

}

Best Answer

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

Related Topic