Activity Forums Salesforce® Discussions Use Lightning Components in Visualforce Pages in salesforce.

  • Use Lightning Components in Visualforce Pages in salesforce.

    Posted by shradha jain on August 31, 2018 at 5:10 am

    How to use Lightning Components in Visualforce Pages in salesforce?

    shariq replied 4 years ago 4 Members · 3 Replies
  • 3 Replies
  • Parul

    Member
    August 31, 2018 at 5:43 am

    There are three steps to add Lightning components to a Visualforce page.

    1.Add the Lightning Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
    2.Create and reference a Lightning app that declares your component dependencies.
    3.Write a JavaScript function that creates the component on the page using $Lightning.createComponent().

     

    Thanks.

  • Anjali

    Member
    September 11, 2018 at 12:59 pm

    Hi Shradha,

    To add Lightning Components to VisualForce Page proceed with the following steps-

    1.Create a lightning,named "XYZ" component either through developer console or through your IDE

    2.Post creation of lightning component, create a style class for the same component

    3.Now use this Lightning component in a Lightning app. For this, we recommend you to create a new Lightning app, named “XYZapp” and use the lightning component in this app.

    4.Create a VisualForce page that will display this lightning component.

    5.VisualForce page should provide the interface where the lightning component that we are going to use in the page can be viewed.

    Once the page is created and previewed, the Lightning component will appear in your VisualForce page.

  • shariq

    Member
    September 15, 2018 at 1:28 am

    Hi,

    Lightning 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.

    Visualforce page - 

    <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.

    Hope this helps.

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos