How to Use Dynamic Custom Labels in LWC

Introduction

Custom labels in Salesforce offer a powerful way to manage text strings that can be translated into any language supported by Salesforce. They can also be used to display messages in the UI. By learning how to use dynamic custom labels in LWC (Lightning Web Components), you can create more adaptable and scalable solutions.

This blog will guide you through the steps to dynamically populate custom labels in LWC, complete with code samples and best practices for SEO.

Table of Contents

1. Sample Use Case to Use Dynamic Custom Labels in LWC
2. Creating a custom label with placeholder
3. Creating an Apex Class to Fetch Labels
4. Using dynamic custom label inside LWC
5. Conclusion

Watch recorded session here

Sample Use Case to Use Dynamic Custom Labels in LWC

We have a strict security guidelines in a Salesforce instance, where we want to prevent certain users from editing/ creating records in specific Objects. We have a created OWD, sharing rules and custom permissions to handle the security and want to show error messages when unauthorized users try to create/ update records of objects like Account, Contact, Opportunity etc.

The format of the error message is You are not allowed to Create records on Account. Most of us by now will get an idea of using custom labels to store the message, but if there are multiple objects and different permission on each object (create/ update) we might end up creating multiple custom labels.

Better approach would be to create a custom label with place holders, so that we can dynamically pass parameters to generate the right content.

Creating a custom label with placeholder

Before you can use custom labels dynamically, you need to set them up in Salesforce.

1. Navigate to Setup: Go to Setup in Salesforce and search for “Custom Labels” in the Quick Find box.
2. Create a New Label: Click “New Custom Label”. Enter a label name and value. For example:
   • Label Name: DynamicLabel
   • Value: You are not allowed to {0} records on {1}

Creating an Apex Class to Fetch Labels

There is no native way in LWC to use dynamic custom labels, as is the case with Aura Components.

To dynamically fetch and replace placeholders in custom labels, you need an Apex class.

Read the Salesforce documentation on how to use dynamic custom labels in Aura Component here.

Apex Code

public with sharing class CustomLabelController {
    @AuraEnabled(cacheable=true)
    public static String getDynamicLabel(String action, String object) {
        String label = System.Label.DynamicLabel;
        label = label.replace('{0}', action).replace('{1}', object);
        return label;
    }
}

Using dynamic custom label inside LWC

Next, we need to call the Apex class and use the value returned with dynamic custom label.

HTML Code

// customLabelComponent.js
import { LightningElement, wire, api } from 'lwc';
import getDynamicLabel from '@salesforce/apex/CustomLabelController.getDynamicLabel';

export default class CustomLabelComponent extends LightningElement {
    @api action = 'Update';
    @api object = 'Account';
    dynamicLabel;

    @wire(getDynamicLabel, { action: '$action', object: '$object' })
    wiredLabel({ error, data }) {
        if (data) {
            this.dynamicLabel = data;
        } else if (error) {
            console.error(error);
        }
    }
}

HTML Code

<!-- customLabelComponent.html -->
<template>
    <lightning-card title="Dynamic Custom Label">
        <p>{dynamicLabel}</p>
    </lightning-card>
</template>

Demo

You can read other useful topics on Custom Labels:

• Unleash the Power of Custom Labels in Salesforce: A Developer’s Guide
• Format Custom Labels with HTML Tags in Salesforce
• How to Use Dynamic Custom Labels in FLOW

Conclusion

Using dynamic custom labels in Lightning Web Components enhances the flexibility and maintainability of your Salesforce applications. By leveraging Apex to fetch and replace placeholders in custom labels, you can manage dynamic text more efficiently.

Feel free to use the code snippet provided and implement it in your Salesforce instance.

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! Happy coding!