0

I am trying to show a lightning component/App in a visualforce page. I have looked into this article but its not helpful.

My VF page shows that that lightning.out.js is not loaded, but the article says its pre loaded in your org.

So please let me know is there a way to achieve it ?

Improve this question
1
  • is your org in winter'16 ?
    – Himanshu
    Commented Oct 7, 2015 at 7:11

3 Answers 3

Reset to default
3

Lightning.out.js is available only in winter'16 so once your org upgraded to winter'16 you will be able to use that.

Improve this answer
4
  • I am testing in winter16 pre release dev org. Its loading the lightning.out.js file but i cant view my lightning app. It says the following "My domain required for lightning".
    – Monish
    Commented Oct 7, 2015 at 12:51
  • do you have namespace defined in your org ?
    – Himanshu
    Commented Oct 7, 2015 at 12:52
  • No I have not created the name space
    – Monish
    Commented Oct 7, 2015 at 13:46
  • 1
    As it stated, you need to enable MyDomain
    – Eric
    Commented Oct 8, 2015 at 13:23
3

Lightning.out is now available in winter 16,

Assume your VF page is as follows, you can user $Lightning.use() and $Lightning.createComponent() in order to call the component

<apex:page standardController="Account" showHeader="false" sidebar="false" showQuickActionVfHeader="false">
    <apex:includeScript value="/lightning/lightning.out.js" />
    <apex:stylesheet value="/resource/slds0120/assets/styles/salesforce-lightning-design-system-vf.css"/>
    <apex:includeLightning />
    <div class="slds" > 
        <div id="lightning" />
    </div>
    <apex:includeScript value="/canvas/sdk/js/publisher.js" />

    <script> 
        var accountId = "{!$CurrentPage.parameters.id}";
        $Lightning.use("c:AccountDetails", function() {
          $Lightning.createComponent("c:UpdateAccountDetails",
                { "accountId" : accountId },
                  "lightning",
                  function(cmp) {
               });
        });
    </script>

</apex:page>

AccountDetails is the component which extends ltng:outApp, Please see the below code for the application.

<Aura:application access="GLOBAL" extends="ltng:outApp">
    <Aura:dependency resource="c:UpdateAccountDetails" />
</Aura:application>

UpdateAccountDetails is my component,which I'm not going to include the entire code here (Contollers, helpers etc.)

<aura:component controller="UpdateAccountDetailsController" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="account" type="Account" required="true" />
    <aura:attribute name="accountId" type="String" required="true"/>

    <--More code-->

    <div aura:id="backdropDiv" class="slds-modal-backdrop slds-modal-backdrop--closed"></div>
    <!-- /div -->
</aura:component>

Please note you do not need to have a My Domain in order to call this component inside a VF page

Improve this answer
2

For security purposes, Lightning components now require you to define a custom Salesforce domain name for your organization. If you’re using Lightning components today, you might need to take action to avoid having Lightning components-based customizations disabled when Winter ’16 is released.

Here's the official doc:

http://docs.releasenotes.salesforce.com/en-us/winter16/release-notes/rn_lightning_cruc.htm

Setup -> Domain Management -> My Domain

Improve this answer

You must log in to answer this question.

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