Custom Label in LWC, Aura, Apex, and Visualforce

Custom Labels are used to create multilingual applications by automatically displaying information or any text in a user’s native language. In this post, we will create a Custom Label and then access it in Lightning Web Component (LWC), Lightning Aura Component, Visualforce Page and Apex Class. Let’s get into the implementation.

To create a Custom Label, type Custom Labels in Quick Find box and click on Custom Labels. Click on New and enter required fields. It should look something like below where Name is the API name of the Custom Label that will be used in code:

Custom Label in LWC (Lightning Web Component)

To access Custom Label in Lightning Web Component (LWC), we have to import it from the @salesforce/label/c.label_name schoped module. Here, c is the default namespace and label_name is the name of label that we want to access. In below example, we are importing Custom Label Sample_Label in sampleLabel variable.

sampleLabelCmp.js

import { LightningElement } from 'lwc';
import sampleLabel from '@salesforce/label/c.Sample_Label';
export default class SampleLabelCmp extends LightningElement {
    strSampleLabel = sampleLabel;
}

Then, we can use sampleLabel variable in component to get the value of Custom Label.

sampleLabelCmp.html

<template>
    <lightning-card title="Custom Labels in LWC">
        <p>{strSampleLabel}</p>
    </lightning-card>
</template>

Custom Label in Lightning Aura Component

There are two ways to access Custom Label in Lightning Aura Component.

1. In Component Markup
2. In JavaScript

We can access the Custom Label in component markup using $Label Global variable like {!$Label.c.label_name} where, c is the default namespace and label_name is the name of label that we want to access.

SampleLabel.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <lightning:card>
    	{!$Label.c.Sample_Label}
    </lightning:card>
</aura:component>

To access Cusom Label in Javascript Controller and Helper, we can use the Global variable $A.

SampleLabelController.js

({
    init : function(component, event, helper) {
        var  strLabel = $A.get("$Label.c.Sample_Label");
        console.log(strLabel);
    }
})

Custom Label in Visualforce Page

To access Custom Label in Visualforce Page, we can use use $Label Global variable, just like we did in Aura Component but without namespace name.

sampleLabel.vfp

<apex:page >
    {!$Label.Sample_Label}
</apex:page>

Custom Label in Apex Class

To access Custom Label in Apex Class, we have to use System class.

SampleLabel.apxc

public class CustomLabel {
    public CustomLabel(){
        String strLabel = System.Label.Sample_Label;
        System.debug(strLabel);
    }
}

This is how we can access Custom Label in Lightning Aura Component, Lightning Web Component, Visualforce Page and Apex Class.

If you want to check more implementations using Lightning Web Components, you can check it here.

Please Subscribe if you don’t want to miss new posts. Thanks!