8

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://)

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.

  • 1
    Have you set up a domain? Try using this <apex:includeScript value="{!$Site.BaseUrl}/lightning/lightning.out.js?v=2"/> instead of ` <apex:includeLightning />` – Richard N Feb 26 '16 at 2:01
  • Hi @RichardN. I haven't set up a domain for my Dev Org. I was just planning on using relative urls for when I apply this code to my work and push it to Prod. I'll set up a domain name and try it. – VaroutSP Feb 26 '16 at 2:10
  • Using {!$Site.BaseUrl} didn't help unfortunately. – VaroutSP Feb 28 '16 at 22:55
4

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.

  • 1
    Are you able to show this in VF Component ? – apn Apr 26 '16 at 21:35

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.