In Lightning Web Components (LWC), you can use Custom Labels to store and manage text values that are displayed in your component's UI. Custom Labels allow you to define text values once and then reference them throughout your code, making it easier to maintain and update the text values as needed.
Here are the steps to use Custom Labels in an LWC:
First, create a Custom Label in your Salesforce org. Go to Setup > Custom Labels and click the "New Custom Label" button. Give the label a name, enter the text value you want to store, and click "Save" to create the Custom Label.
In your LWC, import the Custom Label using @salesforce/c.label syntax, and then use it as needed. For example, if you have a Custom Label called "My_Label", you can import it in your LWC as follows:
import MY_LABEL from '@salesforce/label/c.My_Label';
Once you have imported the Custom Label, you can use it in your component's template or JavaScript code. For example, if you want to display the Custom Label in your component's template, you can use the following code.
HTML File:
<
template
>
<
lightning-card
title={myLabel.CLabel}
variant
=
"narrow"
>
<
p
>
<
lightning-button
label={myLabel.BLabel}>
</
lightning-button
>
</
p
>
<
p
>{myLabel.ALabel}</
p
>
</
lightning-card
>
</
template
>
Javascript File:
import
{ LightningElement } from
'lwc'
;
// importing Custom Label
import
ALabel from
'@salesforce/label/c.C1Label'
;
import
BLabel from
'@salesforce/label/c.C2Label'
;
import
CLabel from
'@salesforce/label/c.C3Label'
;
export
default
class
CustomLabelExampleLWC
extends
LightningElement{
myLabel = {
ALabel,
BLabel,
CLabel
};
}
In the above code, we imported the Custom Label using the @salesforce/c.label syntax and stored it in variables called ALabel/BLabel/CLabel. We then set that variable to a property called myLabel in the component's JavaScript code, which is then used in the component's template to display the Custom Label's text value.
That's it! You can now use Custom Labels in your LWC to store and manage text values that are displayed in your component's UI.