I am learning lightning components. I am wanting to know how to do a hyperlink you can click that takes the user to the recordId of the item clicked.

So for example I have a users card graphic with their information. One of these is their name, which is a hyperlink. You click it and it takes you to the recordId.

The custom object I am using for these users is called Guest__c

So the link in lightning for my Guest__c record looks like this


Lightning Component snippet:

        <div style="background-color:WhiteSmoke;">
        <div class="card-content" style="padding:5px;font-size:.7em;">{!v.item.title}

This above shows the item. {!v.item.title} is the name.


You can use Navigation Event. Here is an example from documentation:

Component [c:navToRecord]-

    <aura:attribute name="recordId" type="String" />

    <p><a onclick="{!c.handleClick}">link to record</a></p>

Controller [navToRecordController.js]-

    handleClick: function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
            "recordId": component.get("v.recordId")

You can use lightning:formattedUrl. It is easy to use and it will make your code small.

Displays a URL as a hyperlink. This component requires API version 41.0 and later.

You can use it in the different way as follows:-

    <p><lightning:formattedUrl value="my/path" /></p>
    <p><lightning:formattedUrl value="https://my/path" tooltip="Go to https://my/path" label="My Cool Website" target="_blank" /></p>
    <p><lightning:formattedUrl value="ftp://my/path" tooltip="Go to ftp://my/path" /></p>
    <p><lightning:formattedUrl value="http://my/path" /></p>
    <p><lightning:formattedUrl value="/my/path" /></p>
    <p><lightning:formattedUrl value=".my/path" /></p>

The result will be like:-

My Cool Website

Usage Considerations

Use the target attribute to change where the link should open. If you don't provide a target, the hyperlink renders without the href attribute. Supported target values are:

  • _blank: Opens the link in a new window or tab.
  • _self: Opens the link in the same frame as it was clicked. This is the default behavior.
  • _parent: Opens the link in the parent frame. If there's no parent, this is similar to _self.
  • _top: Opens the link into the top-level browsing context. If there's no parent, this is similar to _self.

Reference:- https://developer.salesforce.com/docs/component-library/bundle/lightning:formattedUrl/example

  • +1 Nice, formatted url handles a lot of things like open in new window with right and middle mouse click – Raul Nov 16 '18 at 20:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.