Hello friends, today in this post we will discuss Display Lightning Web Component In Visualforce Page. Salesforce has a feature Lightning Out that we can embed LWC 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 Web component on Visualforce Page.
Check out this: Display Lightning Component In Visualforce Page
Today I am going to create a Lightning Web component, lightning App, and Visualforce to show components. Let’s Start.
Step 1: Create a Lightning Web Component which will be shown on Visalforce Page. Defined API decorator variable for the set current record Id. Also, create a Js to show the record Id.
LWCforVfPage.html :
<template>
<!-- header start -->
<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 icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Display Lightning Web Component In Visualforce Page</span>
<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <br/>
<!-- header end -->
<!-- LWC card -->
<lightning-card variant="Narrow" title="Contact Info" icon-name="standard:contact">
<div class="slds-p-horizontal_small">
<p> Contact Info pass from vf page: {recordInfo}</p>
</div>
</lightning-card>
<!-- End LWC Card -->
</template>
LWCforVfPage.Js :
import { LightningElement, api } from 'lwc';
export default class LWCforVfPage extends LightningElement {
@api recordInfo
}
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 extends=”ltng:outApp”. Just Wrap the LWC component in Lightning App.
<aura:application access="GLOBAL" extends="ltng:outApp" >
<c:lWCforVfPage></c:lWCforVfPage>
</aura:application>
Step 3: In this step, we create Visualforce Page where we show the lightning component. We include <apex:includeLightning /> in VF page. To load your LWC or Aura Component inside the VF page we will use $Lightning.use() method.
LWCWithVFPage.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:lWCforVfPage",
{ "recordInfo" : contactId }, //Pass Parameter
"LightningContainer", function(component) {
console.log('Component created Successfully');
});
});
</script>
</apex:page>
Output :
Total views : 1113415