Sunday, January 6, 2019

How to access Custom Labels in Lightning Web Components(lwc)

What is a Custom Label?
 Custom labels are text values stored in Salesforce that can be translated into any language that Salesforce supports. Use custom labels to create multilingual applications that present information (for example, help text or error messages) in a user’s native language.

To import Custom Labels we use @salesforce/label scope module in Lightning Web Components

Syntax

import labelName from '@salesforce/label/labelReference';
labelName  ---> it is a name that refers to the label.
labelReference ---> The name of the label in your org in the format namespace.labelName
Note:
if you don't have any namespace in your org use default namespace c
Ex: c.labelReference

Example

CustomLabelDemo.html
<template>
    <lightning-card  title="Custom Label Example" variant="narrow" icon-name="standard:opportunity">
        <p>{label.WelcomeLabel}</p>
    </lightning-card>
</template>
CustomLabelDemo.js
import { LightningElement } from 'lwc';

// importing Custom Label
import WelcomeLabel from '@salesforce/label/c.SalesforceCodeCrack';
export default class CustomLabelDemo extends LightningElement {
    label = {
        WelcomeLabel,
    };
}
CustomLabelDemo.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="CustomLabelDemo">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
Result

Happy Learning!!!

No comments:

Post a Comment