Time Estimate


Use a Lightning Component in a Visualforce Page

So far, you've learned how to make your Visualforce pages look like the Lightning Experience, and you've learned the basics of creating Lightning components. You've even created an awesome Similar Properties component.

But there's one last thing to accomplish, and it's truly amazing.

We're going to take the Similar Properties component and use it in Visualforce! Yes, you read that correctly. Lightning components are not just for Lightning Experience. Using Lightning Out, we can use Lightning components literally anywhere!

Part 1—Create the Container App

To use a Lightning Component outside of the Lightning Experience, we need to package it up in a Lightning Application. A Lightning Application is basically a Lightning Component that runs in its own window, without the typical Lightning Experience UI such as the Global Navigation. In fact, you've already used a Lightning Application several times during this project. Lightning App Builder is a Lightning Application!

  1. In the Developer Console, click New > Lightning Application. Name it SimilarPropertiesApp and select Lightning Out Dependency App.

    By selecting Lightning Out Dependency App , the app implements extends="ltng:outApp", which basically tells the app to use the Lightning Out framework.

  2. Add a dependency for each of the three components that make up the SimilarProperties component—replace the default code with:

    <aura:application extends="ltng:outApp" >
        <aura:dependency resource="c:SimilarProperties" />
      <aura:dependency resource="c:SimilarProperty" />
        <aura:dependency resource="c:SimilarPropertyEdit" />
        <aura:dependency resource="markup://force:*" type="EVENT"/>

    We're basically telling the Lightning Application that we'll be using these Lightning components. You include all of the components, even though the other components are only used inside the SimilarProperties component.

    We are adding the component to a Visualforce page, so we'll need to ensure that when a user clicks on a property name, that we're properly handling the navigation to that record. This means that we need to detect whether the component is being used on a Lightning Experience page, is being used in a Visualforce page that is being displayed in Lightning Experience, or is in a Visualforce page in Salesforce Classic.

    The final dependency includes the events in the force: namespace, such as navigation events. When a Lightning component is running in Lightning Experience, it automatically has access to these events. So we didn't have to do anything in order to call $A.get("e.force:navigateToSObject") in the navToRecord function. A Lightning component running inside of a Visualforce page in Lightning Experience also has access to these events, however with a slightly different syntax. But when a Lightning component is running in a Visualforce page in Salesforce Classic, we have to use a completely different method to execute things like navigation.

  3. Save the file.

Part 2—Update the Visualforce page

Since we already have a Visualforce page embedded in the Property Record page that is working nicely, we can just update the markup to use the Similar Properties component.

  1. In the Developer Console, choose File > Open Resource, and open the Similar_Properties.vfp page.
  2. Update the page as follows:

    <apex:page standardController="Property__c" standardStylesheets="false" applyBodyTag="false">
            html, body {
            margin: 0;
            padding: 0;
            #lightningComponent {width: 100%;}
        <div id="content">
            <div id="lightningComponent" />

    Don't panic, but yes, you basically just destroyed the page. It's okay, because the page is only going to contain the Lightning Component, which we will put in the <div> with the id of lightningComponent.

Part 3—Load the SimilarProperties component in the Visualforce page

  1. Add the <apex:includeLightning /> tag immediately after the opening <apex:page> tag.

    This directive includes the Lightning Out framework in the page.

  2. Add the following JavaScript immediately before the closing </apex:page> tag:

    var recordId = '{!Property__c.Id}';
    var myUserContext = "{!$User.UITheme}";
    $Lightning.use("c:SimilarPropertiesApp", function() {
                                   {recordId: recordId},
                                   function(cmp) {
                                           event: 'force:navigateToSObject',
                                           handler: function(event) {
                                               if (myUserContext == 'Theme4t' || myUserContext == 'Theme4d') {
                                                   // The Visualforce page is in S1 or Lightning Experience
                                               } else if (myUserContext == 'Theme3') {
                                                   // The Visualforce page is  running in Classic
                                                   window.parent.location = '/' + event.getParams().recordId;
                                               } else {
                                                   console.log("Unsupported theme");   

    This is where the magic happens! The script retrieves the Id of the record from the standard controller and gets the user's theme, and assigns them to variables. Then $Lightning.use() instructs the page to include the SimilarPropertiesApp that you just created. It then creates an instance of the SimilarProperties component in the app, passing the recordId to the component, and then places it in the <div> with the id of lightningComponent in the page.

    Finally, after the component is created, we've added an event handler, $A.eventService.addHandler, and declared the force:navigateToSObject event as the event we are interested in listening for. When the user clicks on a Property Name in the component, the script intercepts the call to $A.get("e.force:navigateToSObject") and executes the function defined as the handler. this function uses the myUserContext variable defined on the second line of the script, which detects the user's theme. If the user's theme is either Theme4t (Salesforce mobile app) or Theme4d (Lightning Experience), the script fires the navigateToSObject method using the proper syntax for a Lightning component running in a Visualforce page inside of Lightning Experience. If the user's theme is Theme3, we know that the user in Classic and we instruct the page to navigate to the new page using window.parent.location.

  3. Save the file.

  4. Refresh the Property Record page and scroll down to the Similar Properties section to see the component.
    Similar Properties section in Lightning Experience.

    How cool is that? It's a Lightning Component in a Visualforce page in a Lightning page. It's a Salesforce Turducken!

  5. Click a property name in the component to confirm that the navigation is working.

  6. Click your profile image and choose Switch to Salesforce Classic.

  7. Click a property in the Recent Items list.

  8. Scroll down to see your beautiful Lightning component running in Salesforce Classic!
    Similar Properties section in Salesforce Classic.

  9. Click on a different property name in the component and voila, the component navigates to the proper record using the window.location method from the script.

  10. Click your name and select Switch back to Lightning Experience.

    Pat yourself on the back! You've not only created an amazing Lightning component, you've also learned how easy it is to leverage your Lightning components inside of Visualforce, whether you're using the Visualforce page in Lightning Experience or back in Salesforce Classic. As next steps, you might want to edit the page layout in the Page Layout Editor to make the space for the Visualforce page a bit taller. But we'll leave that up to you. Now, it's time to brag a little, and go show your colleagues!