Why {!$Label.c.myLabelName} is not working in lightning component added to VisualForce page?

I’m trying to use custom labels in my lightning component project. The problem is {$Label.c.myLabelName} is not showing anything on one environment and is showing “[c.myLabelName]” string on the other. I also cannot retrieve labels with A$.get(“$Label.c.myLabelName”) in my init event handler, but it works when I call it later.
What is going on here? Is that a bug? Does anybody know a good workaround?

Answer

This is my code works fine in developer org

component:

<aura:component >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="customlabl" type="String"/>
    hello : {!v.customlabl}
</aura:component>

controller:

({
    doInit : function(component, event, helper) {
        component.set("v.customlabl",$A.get("$Label.c.Category"));
    }
})

Update: As mentioned in your comment, this could very well be a bug!!!

1) The value of the label is not being set/ rendered on the VF
page for some reason.

2) The aura app preview is breaking / not showing any output when I extend the app using extends="ltng:outApp"

The only other workaround I can think of to handle label is to set the value of the label in the component controller through the VF page.

Modified App:

<aura:application access="GLOBAL" extends="ltng:outApp">
 <aura:dependency resource="prao6308:lcvfTestcomponent"/>
</aura:application>

Modified component:

<aura:component >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="customlabl" type="String"/>
    <aura:attribute name="customlablfromvf" type="String"/>
    <h1>Hello my value is set by  lightning controller: {!v.customlabl}</h1>
    <h1>Hello my value is set by  Visualforce page: {!v.customlablfromvf}</h1>    
</aura:component>

Component controller ( same as above) :

({
    doInit : function(component, event, helper) {
        component.set("v.customlabl",$A.get('$Label.c.Category'));
    }
})

VF Page:

I got an idea on setting attribute value based on blog by Peter Knolle and forcewizard’s blog

http://forcewizard.com/blog/expose-your-lightning-components-visualforce-page

http://peterknolle.com/

( Look for Adding the Component to a Visualforce Page)

VF Page:

<apex:page standardStylesheets="false" showHeader="false" sidebar="false">
    <!-- Include a JavaScript file in your Visualforce page -->
    <apex:includeScript value="/lightning/lightning.out.js" />

    <div id="lightning" />
    <script>
    //Tell your Visualforce page to use ExposeVF Lightning app
        $Lightning.use("prao6308:lcvfTest", function() {
            // Write a function that creates the component on the page
          $Lightning.createComponent("prao6308:lcvfTestcomponent",
          {},
          "lightning",
          function(cmp) {
           cmp.set("v.customlablfromvf","{!$Label.Category}");
          });
        });
    </script>

</apex:page>

VF Page Output:
enter image description here

Attribution
Source : Link , Question Author : maciek , Answer Author : Rao

Leave a Comment