Introduction:
Calling a Lightning Web Component (LWC) from a Visual force page is a useful way to leverage the power and flexibility of Lightning components within your Salesforce Classic environment. Here’s a short description of how to achieve this:
1. Create a Lightning Web Component which will be shown on Visualforce Page.
2. Create a Lightning App so we can embed this component.
3. Create Visualforce Page where we show the lightning component.
ExampleLWC (Lightning Web Component):
2. Create a Lightning App so we can embed this component.
3. Create Visualforce Page where we show the lightning component.
ExampleLWC (Lightning Web Component):
<template>
<lightning-card title=”Lightning Web Component”>
<div class=”slds-p-horizontal_small”>
<p> The Component is call via Visualforce page. </p>
</div>
</lightning-card>
</template>
import { LightningElement, api } from ‘lwc’;
export default class ExampleLWC extends LightningElement {
}
}
ExampleLWCApp (Lightning Aura Application):
- This is a Lightning Aura Application, which acts as a container for one or more
Lightning components. It extends “ltng:outApp,” indicating that it’s designed for
embedding Lightning components in external containers, such as Visualforce pages. - <aura:dependency resource=”ExampleLWC” /> specifies a dependency on the
“ExampleLWC” Lightning Web Component, meaning that this app requires the
“ExampleLWC” component to function properly.
<aura:application extends=”ltng:outApp” access=”GLOBAL” >
<aura:dependency resource=”ExampleLWC”/>
</aura:application>
<aura:dependency resource=”ExampleLWC”/>
</aura:application>
ExampleVFpage (Visualforce page):
- <apex:includeLightning /> includes the Lightning JavaScript library on the page. This
is necessary for embedding Lightning components in Visualforce pages. - <div id=”lightning”></div> creates a placeholder <div> element with the id
“lightning.” This is where the Lightning component will be rendered. - Inside the <script> tag, the $Lightning.use() function is called. This function loads the
specified Lightning app and then creates the Lightning component inside the
“lightning” div. The app being used is “c:ExampleLWCApp,” and it creates an
instance of the “c:ExampleLWC” Lightning Web Component.
<apex:page standardController=”contact”>
<apex:includeLightning />
<div id=”lightning”> </div>
<script>
$Lightning.use(
“c:ExampleLWCApp”,
function() {
$Lightning.createComponent(
“c:ExampleLWC”,
{},
“lightning”
);
}
);
</script>
</apex:page>
</apex:page>
Output :
Call lwc in vf page In Lightning View
Call lwc in vf page In Classic View
Conclusion:
In summary, the code is setting up a Visual force page that loads a Lightning Aura
Application, which, in turn, depends on a Lightning Web Component. When the Visualforce
page is accessed, it will render the Lightning Web Component.
Related Blogs: https://merfantz.com/blog/aura-components-vs-lightning-web-components/
https://merfantz.com/blog/how_to_use_address_autocomplete_field_in_lwc_using_google_api/
Author Bio
