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 ?

  • is your org in winter'16 ? – Himanshu Oct 7 '15 at 7:11
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.

  • 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 Oct 7 '15 at 12:51
  • do you have namespace defined in your org ? – Himanshu Oct 7 '15 at 12:52
  • No I have not created the name space – Monish Oct 7 '15 at 13:46
  • 1
    As it stated, you need to enable MyDomain – Eric Oct 8 '15 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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.