+ Start a Discussion
JaanuJaanu 

hyperlink the case number in lightning

I have build a lightning component to list all the open cases and inserted in a page layout. But I want to hyperlink the case number, if someone clicks on that, it should take the user to the corresponding case for view/edit etc. can you pls let me know how to do this. thanks.
Best Answer chosen by Jaanu
Naveen IlaNaveen Ila
Can you check with below code 
<aura:iteration items="{!v.cases}" var="cse" >
    <tr>  
        
        
        <p><a data-caseid="{!cse.Id}" onclick="{!c.handleClick}" >{!cse.CaseNumber}</a></p>
        <td> {!cse.Id}                             </td>
        <td> {!cse.CaseNumber}                  </td>
        <td> {!cse.Owner.Name}                  </td>
        <td> {!cse.Case_State__c}                  </td>
        <td> {!cse.Priority}                      </td>
        <td> {!cse.Status}                        </td>
        <td> {!cse.Case_Sub_Status__c}          </td>
    </tr> 
 </aura:iteration>


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

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

Don't write alerts in the code. instead use console.log(); 

 

All Answers

Raj VakatiRaj Vakati
try this code

 
<ui:outputURL aura:id="oURL" value="{!v.case.CaseNumber}"/>
  
  
  or
  
    <ui:outputURL aura:id="oURL" value="{'/'+!v.case.CaseNumber}"/>

 
JaanuJaanu
not working pls ...
Raj VakatiRaj Vakati
can you give me your code ? i will rewrite to work for URL 
Naveen IlaNaveen Ila
Can you try with below code: 
 
<a data-caseid="{!caseObj.id}" onclick="{!c.naviteToCaseRecord}">
	{!caseObj.Number}
</a>



naviteToCaseRecord : function(component, event, helper) {

    console.log( 'naviteToCaseRecord' );

    var recordId = event.target.dataset.caseid;


    var event = $A.get( 'e.force:navigateToSObject' );

    if ( event ) {


        event.setParams({
            'recordId' : recordId
        }).fire();

    }
}

 
Amit Chaudhary 8Amit Chaudhary 8
Example 1)
Please check below post for same
1) https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_supported_html_tags_a.htm

Example Using Navigation Event
This example uses an <a> tag that’s wired to a controller action, which fires the force:navigateToSObject event to navigate to a record. The one.app container handles the event. This event is supported in Lightning Experience, Salesforce app, and Lightning communities.
<!--c:navToRecord-->
<aura:component>
    <aura:attribute name="recordId" type="String" />
    
    <p><a onclick="{!c.handleClick}">link to record</a></p>
</aura:component>


Here is the controller that fires the event.
/* navToRecordController.js */
({
    handleClick: function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.recordId")
        });
        navEvt.fire();
    }
})

Example 2)  One small Sample for code
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes"
                access="global"
                controller="AccountController">
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="recordId" type="String"/>
    <!-- This attribute will hold the update records from data table-->
    <aura:attribute name="updatedRecord" type="Object[]" />

    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

    <!-- You must define keyField as 'Id' to save the record back in Salesforce
'onsave' attribute will executed when user clicks on save button -->
    <lightning:card title="Account Editable Datatable">
        <lightning:datatable
                             aura:id="accountDataTable"
                             columns="{! v.columns }"
                             data="{! v.data }"
                             keyField="Id"
                             onsave ="{!c.onSave}"
                             hideCheckboxColumn="true"
                             onrowaction="{! c.handleRowAction }" />
    </lightning:card>
</aura:component>
Controller
({
    /*
     * This finction defined column header
     * and calls getAccounts helper method for column data
     * editable:'true' will make the column editable
     * */
	doInit : function(component, event, helper) {      
        var actions = [{ label: 'Show details', name: 'show_details' }];

        component.set('v.columns', [
            {type: 'action', typeAttributes: { rowActions: actions } },
            {label: 'Name', fieldName: 'Name', editable:'true', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', editable:'true', type: 'phone'},
            {label: 'Rating', fieldName: 'Rating', editable:'true', type: 'text'}
        ]);        
        helper.getAccounts(component, helper);
    },

    handleRowAction : function(cmp,event,helper){
       var action = event.getParam('action');
       var row = event.getParam('row');
     // navigate to sObject detail page     
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": row.Id,
            "slideDevName": "detail"
        });
        navEvt.fire();
    },    
    
    /*
     * This function is calling saveDataTable helper function
     * to save modified records
     * */
    onSave : function (component, event, helper) {
        helper.saveDataTable(component, event, helper);
    }
})
Helper
({
    getAccounts : function(component, event, helper) {
        var action = component.get("c.getAccounts");
        action.setCallback(this,function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.data", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },

    /*
     * This function get called when user clicks on Save button
     * user can get all modified records
     * and pass them back to server side controller
     * */
    saveDataTable : function(component, event, helper) {
        var editedRecords =  component.find("accountDataTable").get("v.draftValues");
        var totalRecordEdited = editedRecords.length;
        var action = component.get("c.updateAccounts");
        action.setParams({
            'editedAccountList' : editedRecords
        });
        action.setCallback(this,function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                //if update is successful
                if(response.getReturnValue() === true){
                    helper.showToast({
                        "title": "Record Update",
                        "type": "success",
                        "message": totalRecordEdited+" Account Records Updated"
                    });
                    helper.reloadDataTable();
                } else{ //if update got failed
                    helper.showToast({
                        "title": "Error!!",
                        "type": "error",
                        "message": "Error in update"
                    });
                }
            }
        });
        $A.enqueueAction(action);
    },

    /*
     * Show toast with provided params
     * */
    showToast : function(params){
        var toastEvent = $A.get("e.force:showToast");
        if(toastEvent){
            toastEvent.setParams(params);
            toastEvent.fire();
        } else{
            alert(params.message);
        }
    },

    /*
     * reload data table
     * */
    reloadDataTable : function(){
    var refreshEvent = $A.get("e.force:refreshView");
        if(refreshEvent){
            refreshEvent.fire();
        }
    },
})
User-added image



Let us know if this will help you

 
JaanuJaanu
Here is my component...

    <aura:attribute name="cases" type="Case[]" />
    <aura:attribute name="caseId" type="Id" />

<aura:iteration items="{!v.cases}" var="cse" >
                <tr>  
                    caseId = {!cse.Id} --> Case id is displayed correctly.
                    alert('Case Id # ' caseId )
                    <aura:set attribute="caseId" value="{!cse.Id}" /> ---> Trying to assign to caseId variable.

                    <p><a onclick="{!c.handleClick}">{!cse.CaseNumber}</a></p>
                    <td> {!cse.Id}                             </td>
                    <td> {!cse.CaseNumber}                  </td>
                    <td> {!cse.Owner.Name}                  </td>
                    <td> {!cse.Case_State__c}                  </td>
                    <td> {!cse.Priority}                      </td>
                    <td> {!cse.Status}                        </td>
                    <td> {!cse.Case_Sub_Status__c}          </td>
                </tr> 
             </aura:iteration>                                        

Controller

    handleClick : function(component, event, helper) {
        alert('Case ID Before # ' + component.get("!v.caseId"));
        //alert('Record Id # ' + component.get("v.cases.Id"));
        //component.set("v.recordId", component.get("v.caseId"));
        //var recordId = {v.cse.Id};
        //alert('Record ID After # ' + recordId);
            var sObectEvent = $A.get("e.force:navigateToSObject");
                sObectEvent.setParams({
                    "recordId": "{!v.caseId}",
                    "slideDevName": "detail"
                });
                sObectEvent.fire(); 

Here I am unable to get the caseId. pls help with this.   
Naveen IlaNaveen Ila
Can you check with below code 
<aura:iteration items="{!v.cases}" var="cse" >
    <tr>  
        
        
        <p><a data-caseid="{!cse.Id}" onclick="{!c.handleClick}" >{!cse.CaseNumber}</a></p>
        <td> {!cse.Id}                             </td>
        <td> {!cse.CaseNumber}                  </td>
        <td> {!cse.Owner.Name}                  </td>
        <td> {!cse.Case_State__c}                  </td>
        <td> {!cse.Priority}                      </td>
        <td> {!cse.Status}                        </td>
        <td> {!cse.Case_Sub_Status__c}          </td>
    </tr> 
 </aura:iteration>


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

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

Don't write alerts in the code. instead use console.log(); 

 
This was selected as the best answer
JaanuJaanu
Getting this error msg

Uncaught Assertion Failed!: Unable to get value for key '!v.caseId'. No value provider was found for '!v'. : false
JaanuJaanu
Great ! worked like a charm!
Naveen IlaNaveen Ila
Can you mark it as Best answer to help others as well
sheetal agrawalsheetal agrawal
@Naveen Ila
Hi,

I am trying to achieve the same thing. 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();
    }
})