Display lightning component on visualforce page

Hey cafeForce users,

Contents

Steps:Step-1: Open the LightningOnVF.cmp and paste the below code.Step-2: Open the CustomApp.app and paste the below code.Step-3: Open the LightningVFpage.page and paste the below code.

Displaying lightning component on visualforce page is very easy & a trick of 3 minutes.

Add the ‘Lightning Components for Visualforce’ JS (JavaScript) library to your VF page using the <apex:includeLightning/> component.
Create a lightning outApp Lightning app that declares your component dependencies.
Write a JavaScript function on the visualforce page that creates the component on the page dynamically using Lightning App using $Lightning.createComponent().

What is lightning outApp?
Use Lightning Out to run Lightning components apps outside of Salesforce servers. Lightning outApp lets you embed Lightning components on almost any type of web page or web app. Whether it’s a Node.js app running on Heroku or any other platform.

Let’s create a simple lightning component and use it on a visualforce page.

Steps:

**Step-1: Open the LightningOnVF.cmp and paste the below code.**


<aura:component>
    <!-- Attributes to be set from visualforce page -->
    <aura:attribute name="title" type="String" default="Custom Title"/>
    <aura:attribute name="isLightningExperience" type="Boolean" default="Custom Title"/>
    
	<!-- Lightning Card -->
    <lightning:card>
        <aura:set attribute="title">
            <lightning:icon iconName="utility:connected_apps" size="small"/>
            {! v.title }
        </aura:set>
        <aura:set attribute="footer">
            <lightning:badge label="Tag1"/>
            <lightning:badge label="Tag2"/>
        </aura:set>
        <p class="slds-m-around_small">IsLightningExperience : {!v.isLightningExperience}</p>
        <hr class="slds-m-around_xx-small" />
    </lightning:card>
</aura:component>

<aura:component>

<aura:attribute name="title" type="String" default="Custom Title"/>

<aura:attribute name="isLightningExperience" type="Boolean" default="Custom Title"/>

<lightning:card>

<aura:set attribute="title">

<lightning:icon iconName="utility:connected_apps" size="small"/>

{! v.title }

</aura:set>

<aura:set attribute="footer">

<lightning:badge label="Tag1"/>

<lightning:badge label="Tag2"/>

</aura:set>

<p class="slds-m-around_small">IsLightningExperience : {!v.isLightningExperience}</p>

</lightning:card>

</aura:component>

**Step-2: Open the CustomApp.app and paste the below code.**


<aura:application extends="ltng:outApp" access="global">
	<aura:dependency resource="c:LightningOnVF"/>
</aura:application>

<aura:application extends="ltng:outApp" access="global">

<aura:dependency resource="c:LightningOnVF"/>

</aura:application>

What is Lightning Out Dependency?
It is used to describe the component dependencies of a Lightning components app to be deployed using Lightning Out. When a Lightning components app is initialized using Lightning Out, it loads the definitions for the components in the app. Specifying component dependencies loads components fast and efficiently.

So our component is now ready to use, let’s stick it to VF page now.

**Step-3: Open the LightningVFpage.page and paste the below code.**


<apex:page showHeader="true" sidebar="false">
    <apex:includeLightning />
    <div id="lightning" />
    <script>
        $Lightning.use("c:CustomApp", function() {
            $Lightning.createComponent(
            "c:LightningOnVF", {
                'title':'Lightning On VF Page',
                'isLightningExperience': isLightningExperience()
            },"lightning",
            function(cmp) {
                console.log( 'Lightning Component Loaded' );
            });
        });
    
    	function isLightningExperience() {
            if( '{!$Currentpage.parameters.sfdcIFrameOrigin}' != '' ) return true;
            return false;
        }
    </script>
</apex:page>

<apex:page showHeader="true" sidebar="false">

<apex:includeLightning />

$Lightning.use("c:CustomApp", function() {

$Lightning.createComponent(

"c:LightningOnVF", {

'title':'Lightning On VF Page',

'isLightningExperience': isLightningExperience()

},"lightning",

function(cmp) {

console.log( 'Lightning Component Loaded' );

});

function isLightningExperience() {

if( '{!$Currentpage.parameters.sfdcIFrameOrigin}' != '' ) return true;

return false;

}

</script>

</apex:page>

How to pass parameters/ set attributes of a lightning component?
Here we have passed 2 parameters to the lightning component. While calling a component here pass the parameters value the same way as we pass in dynamic component creation. The attributes should e public or global.

lightning component on vf page