Use Lightning Components in Visualforce Pages

Use Lightning Component in Visualforce Page

In all of my projects currently, I have stopped creating Visualforce code. well, thats partially correct ;). I still need Visualforce page because most my clients are still on classic / Aloha Salesforce. However, If you have noticed, all Salesforce release notes, talks, webinars, Dreamforce focuses on Lightning experience. And I can say with confidence that Lightning is really really very cool. Sky is limit to your imagination, You can unleash hidden talent within you. Well, all talk talk… and you may be thinking, how can I start with Lightning Component? My client don’t even want to move away from classic. Its lots of work and money for them.

Well, here is an Idea what I am doing. I still uses Salesforce classic, still uses Visualforce but behind the scene, magic… tadaaa , Lightning Component. I will show walk you through this, how its being done.

We will use existing Flipcard Lightning Component to display on Visualforce page. Once Lightning Component is created, we need to create a Lightning Application to act an as a container.

LightningOutContainerApp.app

<aura:application access="GLOBAL" extends="ltng:outApp">
	<aura:dependency resource="c:FlipCard"/>
</aura:application>

In above Lightning Application, we have used access as global so that it can be used anywhere in Salesforce organization like Visualforce. extending ltng:outApp indicates that any component defined in this application can be used on Visualforce page.

Extending from ltng:outApp adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System (SLDS). If you don’t want SLDS resources added to the page, extend from ltng:outAppUnstyled instead.

Next step is to create a Visualforce page where we want to display Lightning Component.

LightningOutDemo.vf

<apex:page >
 <apex:includeLightning />

 <div style="width:30%;height:100px;" id="FlipcardContainer" />

 <script>
 $Lightning.use("c:LightningOutContainerApp", function() {
 $Lightning.createComponent("c:FlipCard",
 { 
 borderColor : "#16325c", 
 bgColor : "#16325c" ,
 fontColor : "#FFF",
 frontText : "What's cool about Lightning Component Development",
 backText : "You dont need to enable Lightning experience, It will work on Classic Instance as well"
 },
 "FlipcardContainer",
 function(cmp) {
 console.log('Component created, do something cool here');
 });
 });
 </script>
</apex:page>

In above Visualforce page, apex:includeLightning tag imports necessary dependencies and scripts to enable Visualforce to act as Lightning component container.

$Lightning.use() method in JavaScript is used to refer Lightning Application which extends ltng:outApp$Lightning.createComponent is used to create Lightning Component dynamically.

We can call $Lightning.use() multiple times on a page, but all calls must reference the same Lightning dependency app.

Reference


Posted

in

by

Comments

15 responses to “Use Lightning Component in Visualforce Page”

  1. Abhi Tripathi Avatar

    Great usage, I am trying to pass a Parameter like SessionId taking it from the VF Page, like {!Api.SessionId} and then using it in Lightning Controller , can I do that ?

  2. Abhi Tripathi Avatar

    Great post while using this , Lightning force:hasRecordId stops working, Record Id starts coming null, is there any work around of getting RecordId from visualforce page without having any apex controller ?

    1. Jitendra Zaa Avatar

      Hi Abhi, You can read parameter in VF, in this case record Id and pass it to Component.

  3. Mohan Babu Avatar
    Mohan Babu

    Hello Jitendra,

    When I open lightning component in VF page, the look and feel is classic and not as lightning. How can I display as Lightning experience?

    Regards,
    Mohan Babu

    1. Jitendra Zaa Avatar

      From v39, you can include “apex:slds” tag in VF to render it like SLDS.

  4. srujan Avatar
    srujan

    Hello Jitendra,
    I am very new to Salesforce and started my career last 3 months back
    I need some help,
    I have a java script button (create Opportunity) on a custom object which direct to a visualforce page that create a new opportunity with pre filled details now we are planing to have the same with lightning Experience,
    pls help me

    Thank you,
    srujan

  5. Manohar Kumar Avatar
    Manohar Kumar

    Hi Jitendra,
    I have a page with some url parameter, can i pass this in in the component.
    if so can you tell me how.
    Thanks,
    Manohar

  6. chandrakanth chandu Avatar
    chandrakanth chandu

    Hi Jitendra,

    I have a working app ( Created using Salesforce trail head : https://trailhead.salesforce.com/en/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_server) .Now i would like to bring the same to my existing VFP. Can you please help me how can i do ?.

  7. Ankush Bhatia Avatar
    Ankush Bhatia

    Hi Jitendra,

    Its a very nice blog. I have a question regarding the same. I am unable to pass the List of Ids of selected campaigns from a list button to attribute of a component which is of list type.

    $Lightning.use(“c:CampaignDedupApp”, function() {

    $Lightning.createComponent(“c:CampaignDedupComp”,
    {
    CampId : “{!selected}”

    },

    Component code :-

    output of aura iterate is below:-

    [
    7
    0
    1
    x
    x
    x
    ]

    I am unable to get Id as a single element.

  8. M.SF Avatar
    M.SF

    The component opens as a subtab/Tab in console. Is there a away to close it. workspace API in lightning doesn’t work

  9. Rodrigo Resendiz Gomez Avatar
    Rodrigo Resendiz Gomez

    Hi, I have one question: What If I wanted to add more than one component to the visualforce page? which will be the way to accomplish this?
    Regards

    1. James Loghry (@dancinllama) Avatar

      @Rodrigo, You just call the “createComponent” javascript call multiple times. If you want it in a different section of the page, then you would change the first parameter of the createComponent call, specifying a different container id.

  10. Nirav Shah Avatar
    Nirav Shah

    Hi Jitendra,

    I have Lightning App to use in my VF Page. My App name is myLightningApp

    After that I have used the same in my VF Page

    $Lightning.use(“c:myLightningApp”, function()
    {
    $Lightning.createComponent(
    “namespace:Managed Package Component”,
    function(cmp)
    {
    console.log(‘… Component created successfully’);
    // Hide the Fixed Header Element
    }
    );
    });

    This is working perfectly fine for the internal users. but when I try to access the VF Page using external users (Community Users) the Lightning Component is not loading. lightning Spinner kips loading to infinite time

    How can I solve the issue? Need your guidance here

  11. Nitish Avatar
    Nitish

    When using this solution in lightning consle, is there any workaround/ solution to use workspace api? Using lightning component inside vf page because list view buttons are not able to open lightning components directly.

  12. Nand Kishore Sharma Avatar
    Nand Kishore Sharma

    Extending from ltng:outApp adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System (SLDS). [ https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_visualforce.htm%5D
    But you says here – extending ltng:outApp indicates that any component defined in this application can be used on Visualforce page.

    Which one is correct?

Leave a Reply to Nirav Shah Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.