1

I got very simple lightning component that works fine as quick action but when I place the component on VF page it does not render properly. I am not sure why it would add loading spinner on VF page? It does not do that when using the component as quick action??

Aura Application (addToObject_VF.app)

<aura:application access="GLOBAL" extends="ltng:outApp"> 
      <aura:dependency resource="c:addToObject"/>
</aura:application>

Lightning Component (addToObject.cmp)

<aura:component implements="force:lightningQuickAction,force:hasRecordId" controller="MyController">

     <aura:attribute name="obj" type="CustomObject__c" default="{ 'sobjectType': 'CustomObject__c' }"/>
     <label class="slds-form-element__label" for="Name">Name</label>

     <aura:handler value="{!v.obj.Campaign__c}" name="change" action="{!c.getChildRecords}"/>
     <force:inputField aura:id="Name" value="{!v.obj.Campaign__c}" required="true"/>

</aura:component>

VF page

<apex:page standardController="Contact" recordSetVar="providers" standardStylesheets="false" extensions="ProviderQuickActionController" cache="false" >
<apex:includeLightning />

<apex:form >

    <div id="lightning" style="width:50%; padding-left:25%"/> 
</apex:form>

<script>
    $Lightning.use("c:addToObject_VF", function() {
      $Lightning.createComponent("c:addToObject",
      { "recordIds" : '{!registrants}' },
      "lightning",
      function(cmp) {
        console.log(cmp);
      });
    });
</script>
</apex:page>

Output enter image description here

1
  • Wondering if this is bug related to force:inputField ?? May 5, 2017 at 16:37

2 Answers 2

3

It may wont work properly because of lightning out behavior

Excerpt from bookshelf.

While the core Lightning Out functionality is stable and complete, there are a few interactions with other Salesforce features that we’re still working on.

Chief among these is the standard components built into the Lightning Component framework. At this time, a number of the standard components don’t behave correctly when used in a stand-alone context, such as Lightning Out, and Lightning Components for Visualforce, which is based on Lightning Out. This is because the components implicitly depend on resources available in the one.app container, instead of explicitly defining their dependencies.

Link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/lightning_out_considerations.htm?search_text=lightning%20out

Since in this case the URL will be the VF page URL and not one.app which comes with lightning experience. That could be the cause of your issue

0

From what I have seen and from above comment, it seems to be limitation of lightning out. I have jquery workaround which seems to be working. I am focusing on the input field - that takes care of "loading" icon

And then removing "Create New" as that does not working for component embedded in VF page. Hope it helps.

function(cmp) {
               console.log(cmp); 
               $("#lightning input:text").first().focus();
               $(".createNew").parent().remove();
           });

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .