Skip to main content

Overview

  • Understand the purpose of custom label
  • Create custom labels and add translation to it
  • Import custom labels in the lightning web component
  • Access custom labels in the lightning web component

What is Custom Label?

In Salesforce, a custom label is essentially a named text string that you can define and then reference throughout your Salesforce organization. They act as placeholders for text that you might use repeatedly in your application, such as button labels, error messages, or any other text-based content.

Accessing Custom Labels in LWC

import LabelName from '@salesforce/label/label-reference';

customLabelExample.xml

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

customLabelExample.html

<template>
    <form>
        <div
            class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium">
            <b>Custom Label Example</b></div>
        <div class="slds-box slds-theme_default">
            <lightning-input 
                    type="email" 
                    label={label.emailAddress}
                    value="">
            </lightning-input>
            <lightning-input 
                    type="tel" 
                    name="mobile"
                    label={label.mobile}
                    value="">
            </lightning-input>
            <div class="slds-m-top_small slds-align_absolute-center">
                <lightning-button 
                    variant="Neutral" 
                    label="Cancel" 
                    class="slds-m-left_x-small" 
                    onclick={handleCancel}>
                </lightning-button>
                <lightning-button 
                    variant="brand" 
                    class="slds-m-left_x-small" 
                    label="Next" 
                    onclick={handleNext}>
                </lightning-button>
            </div>
        </div>
    </form>
</template>

customLabelExample.js

import { LightningElement } from 'lwc';
import emailAddress from '@salesforce/label/c.Email_Address';
import mobile from '@salesforce/label/c.Mobile';

export default class customLabelExample extends LightningElement() {

     // Expose the labels to use in the template.
    label = {
        emailAddress,
        mobile,
    };

    handleNext(){
    }

    handleCancel(){
    }
}

Final Outcome

Now, if a user whose language is set up as French views the form, they will see the field’s label (Email address and Mobile) in their native language.

It is time for you to go and practice!

Subscribe For More Updates

 

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!