Add Lightning Component to VisualForce Page or Component

Question

I'm trying to bring a Lightning component through so that it is visible in a VisualForce Component, but a VF page is ok if this isn't doable.

I've checked a number of resources that say similar things: (All non-linked links are http://)

• Lightning Components in Visualforce
• winter 16 bug ?- $Lightning is not defined. Please try again
• Showing a Lightning Component/App inside Visualforce Page
• Use An Inline Visualforce Page With Standard Page Layouts
• Add Visualforce component to any page layout?
• Is there any way to add lightning component to a page layout?
• Lightning Components Developer Guide

I took my code from the Lightning Components Developer Guide document above when putting together an example.

Lightning Component: contacts.cmp

<aura:component controller="ContactController">
    <aura:dependency resource="spanish:contacts" />
    <!-- Handle component initialization in a client-side controller -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!-- Dynamically load the list of contacts -->
    <aura:attribute name="contacts" type="Contact[]"/>
    <!-- Create a drop-down list with two options -->
    <ui:inputSelect aura:id="selection" change="{!c.select}">
        <ui:inputSelectOption text="All Contacts" label="All Contacts"/>
        <ui:inputSelectOption text="All Primary" label="All Primary"/>
    </ui:inputSelect>
    <!-- Display record create page when button is clicked -->
    <ui:button label="New Contact" press="{!c.createRecord}"/>
    <!-- Iterate over the list of contacts and display them -->
    <aura:iteration var="contact" items="{!v.contacts}">
        <!-- If you’re using a namespace, replace with myNamespace:contactList -->
        <c:contactList contact="{!contact}"/>
    </aura:iteration>
</aura:component>

Lightning Application: TestLightApp.app

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="spanish:contacts" />
</aura:application>

I tried getting things to come through on a VF Page:

<apex:page standardController="Contact">
    <apex:includeLightning />
<!--    <apex:includeScript value="/lightning/lightning.out.js" />-->
    <div id="lightning" />

    <script>
        $Lightning.use("spanish.TestLightApp", function() {
            $Lightning.createComponent("spanish:contacts",
                                       {label: ""}, 
                                       "lightning",
                                       function(cmp) {
                                           //  Do some stuff
                                       }
            );
        });
    </script>
</apex:page>

And a VF Component:

<apex:component >
    <apex:attribute name="testComponent" type="String" description="" />
<!--    <apex:includeScript value="/lightning/lightning.out.js?v=2" />  -->
    <apex:includeLightning />
    <div id="lightning" />
    <p>
        Hello, World!
    </p>

    <script>
    /*  $Lightning.use("spanish.contacts", function() {});  */

       $Lightning.use("spanish.TestLightApp", function() {
            $Lightning.createComponent("spanish:contacts",
                                       {label: ""}, 
                                       "lightning",
                                       function(cmp) {
                                           //  Do some stuff
                                       }
            );
        });
    </script>
</apex:component>

When testing the component I get the following error message:

Uncaught ReferenceError: $Lightning is not defined

I've tried importing the lightning.out.js file as well as using .

When testing the page I get the following error message:

https://c.ap2.visual.force.com/c.TestLightApp/undefined.app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT Failed to load resource: the server responded with a status of 500 (Server Error)

Is anyone able to help out and show me where I'm tripping up please? Thank you in advance.

Answer 1

I've managed to get a simple Lightning component working in a VF page using the following link: Peter Knolle: Lightning Components in VisualForce It was listed in the links that I checked, but I didn't use any of the code, just used as a source to check against what I was doing.

When I did an almost direct copy/paste (a few lines removed because fields didn't exist in my Org) into Salesforce, everything worked as expected and I had a basic Lightning component in a VisualForce page, which I was able to add to my page layout.