Format Custom Labels with HTML Tags in Salesforce

Introduction

Custom labels play a vital role in Salesforce customization, allowing developers to store text values that can be easily translated and reused across the platform. While custom labels offer flexibility, formatting them to suit specific design requirements can sometimes be challenging. In this blog post, we’ll explore how to format custom labels with HTML tags, unlocking a world of possibilities for enhancing the user interface in Salesforce.

This article covers:

• Understanding Custom Labels
• Formatting Custom Labels with HTML
• Display formatted Custom Label in LWC Component
• Display formatted Custom Label in FLOW
• Conclusion

Watch the recording here

Understanding Custom Labels

Before diving into HTML formatting, let’s briefly review what custom labels are in Salesforce. Custom labels are essentially text values that can be referenced in Visualforce pages, Lightning components, Apex code, and more. They provide a convenient way to store static text and ensure consistency throughout your Salesforce application, which can also be translated into different languages using Translation Workbench.

Formatting Custom Labels with HTML Tags

HTML tags can be used within custom labels to apply various formatting styles, such as bold, italics, colors, and more. Let’s look at an example of how to format a custom label using HTML tags:

Custom Label

In this article you will learn:
<ul>
<li>How to use Custom Labels.</li>
<li>Formatting Custom Labels using HTML Tags.</li>
</ul>
<strong style="color:red">Subscribe for such useful contents. </strong>
<a href="https://www.youtube.com/@sfdcrocks2478"> Follow Youtube </a>

In this example, the <strong> tag is used to make the text “Welcome” bold. You can similarly use other HTML tags like <em>, <span>, <font>, etc., to achieve different formatting effects.

Display formatted Custom Label in LWC Component

JS Code

import { LightningElement } from 'lwc';
import FormattedCustomlabel from '@salesforce/label/c.FormattedCustomlabel';

export default class ModalComponentDemo extends LightningElement {
    labelMsg = FormattedCustomlabel;
}

HTML Code

<template>
    <div style="background:white;padding:10px;margin-bottom:10px">
        <lightning-formatted-rich-text value={labelMsg}>
        </lightning-formatted-rich-text>
   </div>
</template>

Demo

Display formatted Custom Label in FLOW

Conclusion

In this blog post, we’ve learned how to format custom labels with HTML tags in Salesforce. By leveraging HTML tags, developers can enhance the appearance of custom labels and make it more visually appealing.

Feel free to use the provided code snippets in your own Salesforce org and experiment with different formatting styles.

We welcome your feedback and suggestions in the comments section below. Don’t forget to subscribe to our newsletter for more Salesforce tips and share this article with your fellow developers!