function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Richard CookRichard Cook 

Lightning component works in standalone app but not when embedded in Visualforce page

I have a lightning component I've simplified down to having one ui:inputNumber. This is working when I surround it with a standalone Lightning app but it is giving errors when I embed it in a VisualForce page. The error I get displayed on my page is  
afterRender threw an error in 'markup://ui:inputNumber' : this.ld.zeroDigit is undefined
I'm on Winter '16 and am following the standard example to embed a Lightning app & component in a VisualForce page.

Component: 
<aura:component implements="flexipage:availableForAllPageTypes" controller="Pcmp_DiscountCalculatorController">

<aura:attribute name="derivedPrice" type="double" default="1000.00"/>
<div>
    <div >
        Derived Price: 
        <ui:inputNumber value="{!v.derivedPrice}" />
    </div>
</div>
VisualForce Page: 
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<!-- Script needed to embed Lightning Components in Visualforce pages. -->
<apex:includeScript value="/lightning/lightning.out.js" />

<!-- Lightning Desktop extra styles and loading of Lightning Component-->
<script type="text/javascript">
  $Lightning.use("c:DiscountCalcVF", function() {
    $Lightning.createComponent("c:DiscountCalculatorPad",
    { accountId: "{!$CurrentPage.parameters.accountId}" ,
      opportunityProductId : "{!$CurrentPage.parameters.productId}" },
    "pricingpage",
    function(cmp) {
      // do some stuff
    });
  });

</script>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

 <head>
 <title>Change this title</title>
 <apex:stylesheet value="{!URLFOR($Resource.SLDS0101, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
 </head>    

 <body>    

 <!-- REQUIRED SLDS WRAPPER -->
<div class="slds">    
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">    
  <div >
    <div id="pricingpage"></div>
  </div>
  <!-- / PRIMARY CONTENT WRAPPER -->    

</div>
</div>
 <!-- / REQUIRED SLDS WRAPPER -->    
</body>
</html>
</apex:page>



 
James LoghryJames Loghry
Sounds like you're not handling the ld/zeroDigit variable correctly.  Is that rerender.js dependent on another component?

Also, the way that aura:components work with Visualforce is with dependencies.  Make sure you define your component in your application as an aura:dependency.  For more info on that, see my post here: https://developer.salesforce.com/forums/ForumsMain?id=906F00000005I8mIAE
James LoghryJames Loghry
I should also note that you may need to create a new aura:application to make it work specifically with visualforce (and with the aura:dependency stuff).  It may also make sense to make a parent component for that application, if you have multiple components in that application too... just depends on your circumstances.
Richard CookRichard Cook

I'm not handling rendering at all, my component has just a simple ui:inputNumber in it.
I've pared my example down to a bare minimum, this component has a single ui:inputNumber in it, no controllers etc. You can load this in an org to see it for yourself.
If you comment out the ui:inputNumber and uncomment the ui:outputNumber then it doesn't display at all, instead showing
Uncaught error in $A.run() : Cannot read property 'charCodeAt' of undefined

Visualforce page, SimpleTestPage.page:
 

<apex:page showHeader="false" docType="html-5.0">
    <apex:includeScript value="/lightning/lightning.out.js" />

    <div id="lightning" />

    <script>
        $Lightning.use("c:SimpleTestApp", function() {
    $Lightning.createComponent("c:SimpleTestCmp",
    { "simpleNumber": 10 },
    "lightning",
    function(cmp) {
      // do some stuff
    });
  });
    </script>
</apex:page>

Lightning app, SimpleTestApp.app: 
<aura:application  access="GLOBAL" extends="ltng:outApp">
	<aura:dependency resource="c:SimpleTestCmp" />
	<!-- c:SimpleTestCmp / -->
</aura:application>

Lightning component, SimpleTestCmp.cmp: 
<aura:component >
    <aura:attribute name="simpleNumber" type="Decimal" default="100"/>
    
    <!-- ui:inputNumber displays but shows this error. -->
    <!-- afterRender threw an error in 'markup://ui:inputNumber' : Cannot read property 'charCodeAt' of undefined -->
    <ui:inputNumber label="Simple" value="{!v.simpleNumber}" />
    
    <!-- ui:outputNumber doesn't display at all, shows this error. -->
    <!-- Uncaught error in $A.run() : Cannot read property 'charCodeAt' of undefined -->
    <!-- ui:outputNumber value="{!v.simpleNumber}" / -->
</aura:component>

 
Richard CookRichard Cook
Doing more digging it looks like $Locale isn't getting filled in, or at least not in time for rendering, when Lightning is loaded through a Visualforce page. So, in the NumberFormat constructor, the symbols are all undefined, then things go off the rails.
James LoghryJames Loghry
Makes sense.  In your afterRender method could you use the code here to grab the locale instead?  Also, may want to try using $locale instead, as the functions are all lower case and case sensitive?

If neither of those work, then you could always define an aura:attribute, and pass the locale in from your VF page.
James LoghryJames Loghry
Oops.. here's the locale code I was talking about..
  
({
    checkDevice: function(component) {
        var locale = $A.get("$Locale.language");
        alert("You are using " + locale);
    }
})

Taken from here: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_locale_value_provider.htm?search_text=$locale
Richard CookRichard Cook
I raised this as a case through my company's Premier support. It turns out that it was a defect in Lightning that would be fixed in a patch to Winter '16. I just tried this example again and it is now working, so there was a problem and it is now patched by Salesforce.