Last Updated on July 7, 2022 by Rakesh Gupta

Big Idea or Enduring Question:

• How to use Custom Labels in Lightning Web Components?

Objectives:

After reading this blog, you’ll be able to:

• 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
• and much more

In the past written a few articles on Lightning Web Component. Why not check them out while you are at it?!

1. Access Static Resources, Content Asset Files in Lightning Web Component
2. Add Confirmation, Alert, and Prompt Dialog Box to Lightning Web Component

Business Use case

Rachel Gillett is working as a Junior Developer at Gurukul on Cloud (GoC). She has created a form using the lightning web component (lwc) after reading this article, as shown below:

The fields label are hard coded in the HTML file of the lightning web component.

<lightning-input 
	type="email" 
	label="Email Address" 
	value={emailvalue} 
	onchange={handleEmailChange}> 
</lightning-input> 
<lightning-input 
	type="tel" 
	name="mobile" 
	label="Mobile" 
	value={mobilevalue} 
	onchange={handleMobileChange}>
</lightning-input>

The Sales Director has asked her to make sure that form labels should support multiple languages (mainly English, French, Spanish, and German). So, a user whose language belongs to one of them must see labels in their local language.

What are Custom Labels?

Custom labels are custom text values that can be translated into any language that Salesforce supports. 

• It is also helpful in providing the best in class user experience through multilingual applications that automatically present information in a user’s native language. 
• It may contain up to 1000 characters.
• Custom labels are accessible from Apex, Visualforce pages, Lightning Component, Lightning Web Components, and Salesforce Flow.

Create Custom Labels

Create one custom label to store the label for the Email Address and its translation.

1. Click Setup.
2. In the User Interface, type Custom Labels.
3. Click on the New Custom Label button.
4. Enter Short Description; the Name will auto-populate.
5. Now enter the Email Address in the Value.
6. Click Save.
7. Add translation for german and french languages. 

Repeat the above steps to create another custom label for Mobile.

How to Access Custom Labels in Lightning Web Component?

To access custom labels in Lightning web components first we have to import from @salesforce/label to the component’s JavaScript file. 

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

• labelName – A name that refers to the label.
• labelReference – The name of the label in your org in the format namespace.labelName. 

Automation Champion Approach (I-do):

Now it’s time to create a lightning web component to programmatically access custom labels. 

customLabelExample.js-meta.xml

A lightning web component can be used to build custom pages for Lightning Experience and the Salesforce mobile app quickly with point-and-click tools. Make sure to add the right target for it.

This configuration file makes the component available for all Lightning page types but restricts support on desktops.

<?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

To reference a resource in a template, use {property} syntax (i.e. {label.emailAddress} in our example), which is the same syntax we use to reference any JavaScript property.

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

The JavaScript code imports two custom labels: one for Email Address and another for Mobile. 

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

export default class InputExample extends LightningElement() {

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

    handleNext(){
    }

    handleCancel(){
    }
}

Proof of Concept

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.

Great! You are done! Feel free to modify the lightning web component code to use the custom header and button labels.

Formative Assessment:

I want to hear from you!

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.