Custom Labels In Lightning Web Component(LWC)

Custom Labels In Lightning Web Component(LWC)

Custom Labels In Lightning Web Component(LWC)

Custom labels are custom text values that can be accessed from LWC Component, Aura Component, Apex classes, Visualforce pages. The values can be translated into any language Salesforce supports. Custom labels enable developers to create multilingual applications by automatically presenting information (for example, help text or error messages) in a user’s native language.

In this post we will see how to use custom label in LWC component. If you want to add custom label in aura component please refer Custom Labels In Lightning Aura Component

Create Custom Labels

Go To Setup — Create — Custom Labels. Click on New Custom Labels. Enter value for name, value and description. We can use custom label name to access custom label value in apex code using System.Label.labelName

The advantage of using a custom label is that label will be displayed to user depending on their language automatically. We need to specify translation for label using translation workbench.

Use Custom Labels in LWC

Using custom label in LWC is easy. To import a label in a Lightning Web Component JavaScript file, use @salesforce/label in an import statement.

import labelName from '@salesforce/label/label-reference';
  • labelName: It is name that refers to the label in LWC.
  • labelReference: The name of the label in your org in the format namespace.labelName. If there is no namespace then simply use labelName.

Custom Labels In Lightning Web Component(LWC) Example

First, let’s create 3 labels from Setup — Create — Custom Labels. Click on New Custom Labels. Enter value for name, value and description.

  • WelcomeNoteLabel: Welcome to SFDCPOINT
  • HomePageNewsLabel: Your home page news
  • NewCaseLabel: New Case

Now create new lightning web component with name customLabelExampleLWC. Here is code

customLabelExampleLWC.html

<template>
    <lightning-card  title={label.WelcomeLabel} variant="narrow">
        <p>
            <lightning-button label={label.NewCaseLabel}></lightning-button>
        </p>
        <p>{label.HomePageLabel}</p>
    </lightning-card>
</template>

customLabelExampleLWC.js

import { LightningElement } from 'lwc';
// importing Custom Label
import WelcomeLabel from '@salesforce/label/c.WelcomeNoteLabel';
import HomePageLabel from '@salesforce/label/c.HomePageNewsLabel';
import NewCaseLabel from '@salesforce/label/c.NewCaseLabel';
export default class CustomLabelExampleLWC extends LightningElement {
    label = {
        WelcomeLabel,
        HomePageLabel,
        NewCaseLabel
    };
}

customLabelExampleLWC.js-meta.xml

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

Now we can add this lwc component on home page.

  • Go to Home page
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your modalPopupLWC component and drag it on right-hand side top.
  • Click Save and activate.

 

We will get the following output

Custom Labels In Lightning Web Component(LWC)

For more details please refer to official link

Permanent link to this article: https://www.sfdcpoint.com/salesforce/custom-labels-in-lightning-web-component-lwc/

9 comments

Skip to comment form

    • rahul on July 1, 2020 at 1:04 pm
    • Reply

    Ankush I have a apex function which has a return type as PageReference and its returning PageUtils.redirect(url);
    How to do the same in LWC

    1. Hello Rahul
      Do you want to redirect user to some url?
      If yes, you need to return url from method and use navigationMixin for redirect
      https://www.sfdcpoint.com/salesforce/navigation-service-in-lwc/

        • Rahul on July 1, 2020 at 2:36 pm
        • Reply

        how to return the url from method in the form of string?because page reference won’t work in @AuraEnabled

    • Divz on November 9, 2020 at 4:56 pm
    • Reply

    This is not working Lightning Community .How we can pull custom label in Community

      • Divz on November 9, 2020 at 6:04 pm
      • Reply

      Hi Ankush,
      It is working good. I missed to put

      label = {
      welcomelabel
      };

    • Niteesh on August 13, 2021 at 11:13 am
    • Reply

    Hi Ankush,
    label = {
    WelcomeLabel,
    HomePageLabel,
    NewCaseLabel
    };

    can we write something like below
    var = labelName;// from variable label name define
    label = {
    labelName,
    };

    Actually I need to access label according to market.(Dynamic name for label)

    • Amit Parsad on August 25, 2021 at 2:10 pm
    • Reply

    Hi Ankush can we use custom label in LWC config file when we are defining public properties?

    • Manik on April 10, 2022 at 1:16 am
    • Reply

    Hi Ankush, Can we use the Custom Labels in TEXT BLOCK in Omniscript. If Yes, Please share syntax with sample example.

    Regards,
    Manik

    • Andrew on July 20, 2022 at 1:41 am
    • Reply

    Good concise info.

Leave a Reply

Your email address will not be published.