Lightning Components for Visualforce is based on Lightning Out, a powerful and flexible feature that lets you embed Lightning components into almost any web page. When used with Visualforce, some of the details become simpler. For example, you don’t need to deal with authentication, and you don’t need to configure a Connected App.
In this example, we will see a very basic example of the lightning component and then display lightning component in the visualforce page.
Lightning Component LightExample1
<aura:component><div><h1> This is lightning component for visualforce page</h1></div></aura:component> |
Lightning App LightExampleApp1
Here important point is that ltng:outApp needs to be extended in app.
ltng:outApp adds SLDS resources to the page to allow our Lightning components to be styled with the Salesforce Lightning Design System. If we don’t want SLDS resources added to the page, we need to extend from ltng:outAppUnstyled instead.
<aura:application extends="ltng:outApp" access="GLOBAL"><aura:dependency resource="c:LightExample1" /></aura:application> |
Visualforce page LightningExampleVF1
<apex:page showHeader="false" sidebar="false"><apex:includeLightning /> <apex:includeScript value="/lightning/lightning.out.js" /><div id="LightningComponentid" /> <script>$Lightning.use("c:LightExampleApp1", function() {$Lightning.createComponent("c:LightExample1",{ },"LightningComponentid",function(cmp) {console.log('Display Lightning component in visualforce page');});});</script></apex:page> |
Use Lightning Components in Visualforce Pages output
In the above Visualforce page, apex:includeLightning tag imports necessary dependencies and scripts to enable Visualforce to act as Lightning component container.
We can use $Lightning.createComponent create Lightning Component dynamically.
We can call $Lightning.use() multiple times on a page, but all calls must reference the same Lightning dependency app.