Hello friends, today in this post we will discuss Display Lightning Component In Visualforce Page. Salesforce has a feature Lightning Out that we can embed Lightning component in Visualforce. It’s a powerful and flexible feature we also embed lightning components in any web page. We all know most of the clients now use Lightning Experience but we also know that there is some functionality that is built in the Visualforce page. So we can easily display the Lightning component on Visualforce Page.
Check out this: Invocable Method in Apex Salesforce
Today I am going to create a Lightning component, lightning App, and Visualforce to show components. Let’s Start.
Step 1: Create a Lightning Component which will be shown on Visalforce Page. Defined a string attribute for the set current record Id. Also, create a Js Controller to show the record Id.
LightningComponentForVfPage.comp :
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="contactId" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div style="padding:10px">
<!-- Start header -->
<div class="slds-tabs_card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<lightning:icon iconName="standard:event" alternativeText="Event" title="Event" />
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Display Lightning Component In Visualforce Page</span>
<span class="slds-page-header__title slds-truncate" title="TechDicer">TechDicer</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <br/>
<!-- end header -->
<!-- Start Card to show contact info -->
<lightning:card title="Contact Info">
<p class="slds-p-horizontal_small">
Contact Id pass from Visalforce Page : {!v.contactId}
</p>
</lightning:card>
<!-- End -->
</div>
</aura:component>
LightningComponentForVfPageController.js :
({
doInit : function(component, event, helper) {
var contactId = component.get("v.contactId");
console.log('contact Id ==> ' + contactId);
}
})
Step 2: Create a Lightning App so we can embed this component in this. We use this App so we can set global and also we can’t directly show Lightning Component to Visalforce Page, we need this app with access=”GLOBAL” and extends=”ltng:outApp”. We set Lightning Component in aura:dependency.
LightningAppForVfPage.app :
<aura:application access="GLOBAL" extends="ltng:outApp" >
<aura:dependency resource="c:LightningComponentForVfPage"/>
</aura:application>
Step 3: In this step, we create Visualforce Page where we show the lightning component. We include <apex:includeLightning /> in VF page.
LightningComponetWithVFPage.vfp :
<apex:page sidebar="true" showHeader="true">
<apex:includeLightning />
<!--Lightning Container-->
<div style="width:100%;height:100px;" id="LightningContainer"/>
<script type="text/javascript">
//get contact Id from URL
var contactId = "{!$CurrentPage.parameters.id}";
//Create Lightning Component
$Lightning.use("c:LightningAppForVfPage", function() {
$Lightning.createComponent("c:LightningComponentForVfPage",
{ "contactId" : contactId }, //Pass Parameter
"LightningContainer", function(component) {
console.log('Component created Successfully');
});
});
</script>
</apex:page>
Output :
Total views : 1113492