Activity Forums Salesforce® Discussions Can we use Lightning Component into Salesforce VF page? If yes how?

  • shariq

    Member
    September 22, 2018 at 3:57 pm

    Yes, using lightning out the functionality of the salesforce lightning component.

    Key points to remember: –

    use <apex:includeLightning /> tags at the beginning of VF page This component loads the JavaScript file used by Lightning Components for Visualforce.
    Lightning App must extend ltng:outApp library/interface.
    We can use $Lightning.use() many times into VF page but that must reference the same lightning app.
    We can only call those components that are referenced into the app.
    LightningOutDemoApp.app

    <aura:application access=”Global” extends=”ltng:outApp” >
    <c:AccountList ></c:AccountList>
    </aura:application>

    Description of above code

    access: – determines, if we can use the component throughout the Salesforce org or not acceptable values, are global, public, private

    ltng:outApp: – 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. using ltng:outApp we can access our lightning component into VF page or any external site.

    AccountListVF.vfp

    <apex:page >
    <apex:includeLightning />

    <– div where we will embed our lightning component –>

    <div id=”lightning” />
    $Lightning.use(“c:LightningOutDemoApp”, function() {
    $Lightning.createComponent(“c:AccountList”,
    {
    “VFpageValue” : “Woohoooo, Lightning Out is an amazing feature of Salesforce Lightning”
    },
    “lightning”,
    function(cmp) {

    });
    });

    </apex:page>

    $Lightning.use(): – Refer the lightning application that we are using.

    $Lightning.createComponent(): – Used to dynamically creating the lightning component.

  • Parul

    Member
    September 22, 2018 at 4:15 pm

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

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos