⚡️ LWC Hyperlink Magic: Using the Anchor Tag in lightning-formatted-rich-text 🔗

Introduction

If you’re developing Salesforce Lightning Web Components (LWC), you’ve likely encountered the need to display complex, formatted text. The standard way to achieve this is by using the <lightning-formatted-rich-text> tag. But what happens when you need to embed a functional hyperlink within that text?

Fortunately, the solution is straightforward: you can use the standard HTML anchor tag (<a>) directly within the value passed to the component. This post will guide you through the exact implementation to ensure your links work perfectly in LWC.

---

Implementing Hyperlinks in LWC’s lightning-formatted-rich-text

The anchor tag (<a>) is the key element for creating a hyperlink inside the <lightning-formatted-rich-text> component. You pass the HTML string containing the anchor tag from your JavaScript Controller to the LWC’s HTML template.

Sample Lightning Web Component (LWC)

Let’s look at the structure of a sample LWC that demonstrates this functionality.

HTML Template

This template is simple. It uses the <lightning-card> for structure and contains the essential <lightning-formatted-rich-text> component, binding its value attribute to a property named richtext.

<template>
    <lightning-card>
        <div class="slds-m-around_medium">
            <lightning-formatted-rich-text
                value={richtext}
            ></lightning-formatted-rich-text>
        </div>
    </lightning-card>
</template>

JavaScript Controller

This is where the rich text content, including the hyperlink using the anchor tag, is defined. The richtext property holds the full string.

import { LightningElement } from 'lwc';

export default class SampleLightningWebComponent extends LightningElement {
    richtext = 'Visit <a href="https://www.infallibletechie.com" target="_blank" rel="noopener noreferrer">InfallibleTechie Blog</a> for tips.';
}

Configuration File (js-meta.xml)

The configuration exposes the LWC for use in the Salesforce environment, specifically allowing it to be placed on a Lightning Tab in this example.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>64.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

---

How It Works

When the LWC renders, the <lightning-formatted-rich-text> component processes the string stored in the richtext property. Since this component is designed to safely render a limited set of HTML tags, the anchor tag (<a>) is recognized and converted into a clickable hyperlink visible to the user.

The result displayed on the screen will be:

“Visit InfallibleTechie Blog for tips.” (where InfallibleTechie Blog is a clickable link).

---

To wrap up, embedding hyperlinks in LWC using the anchor tag within the <lightning-formatted-rich-text> component is the standard and correct approach.

Code Snippet Recommendations and Best Practices

While the provided code snippet is completely functional and correct, it adheres to two crucial best practices for security and user experience:

1. target="_blank": This attribute ensures the link opens in a new browser tab. This is a great user experience practice as it prevents users from navigating away from the current Salesforce page, preserving their workflow.
2. rel="noopener noreferrer": When using target="_blank", this attribute is a critical security best practice.
   • noopener prevents the new page from accessing the window object of the opening page (the Salesforce page), mitigating a type of attack known as tab-napping.
   • noreferrer prevents the browser from sending the address of the current page as the referrer header to the new page.

Always include rel="noopener noreferrer" when using target="_blank" in your anchor tags.