Custom Labels In Lightning Aura Component

Custom Labels In Lightning Aura Component

Custom Labels In Lightning Aura Component

Custom labels are custom text values that can be accessed from  Aura Component, LWC 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.

To access custom labels in Aura components, use the $Label global value provider. In this post we will see how to use custom label in lightning aura component. If you want to add custom label in lwc please refer Custom Labels In Lightning Web Component(LWC)

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 Lightning Aura Component

Use the following syntax to access custom labels in Aura components.

• $Label.c.labelName for the default namespace
• $Label.namespace.labelName if your org has a namespace, or to access a label in a managed package

Use Custom Labels in Lightning Aura Component javascript controller

Use the following syntax to access custom labels in Aura components.

• $A.get(“$Label.c.labelName”) for the default namespace
• $A.get(“$Label.namespace.labelName”) if your org has a namespace, or to access a label in a managed package

Custom Label in Lightning Aura Component Example

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

We will add two custom labels value in aura component and 3rd custom label value will be added in aura component by setting value to attribute using javascript controller on click of button.

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

customLabelExampleAura.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="homePageNews" type="String" />
    <lightning:card title="{!$Label.c.WelcomeNoteLabel}">
        <p>
            <lightning:button variant="brand" label="{!$Label.c.NewCaseLabel}" onclick="{!c.newCaseAction}"/>
        </p>
        <p>{!v.homePageNews}</p>
    </lightning:card>
</aura:component>

customLabelExampleAuraController.js

({
    newCaseAction : function(component, event, helper) {
        var homePageNewslabel = $A.get("$Label.c.HomePageNewsLabel");
        component.set('v.homePageNews', homePageNewslabel);
    }
})

Now we can add this lightning aura component on the home page.

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

User will see custom label values in aura component. When user will click on the New Case button then one more custom label value will be retrieved from aura component controller using attribute. We will get the following output

For more details please refer to official link.