In all of my projects currently, I have stopped creating Visualforce code. well, thats partially correct ;). I still need Visualforce page because most my clients are still on classic / Aloha Salesforce. However, If you have noticed, all Salesforce release notes, talks, webinars, Dreamforce focuses on Lightning experience. And I can say with confidence that Lightning is really really very cool. Sky is limit to your imagination, You can unleash hidden talent within you. Well, all talk talk… and you may be thinking, how can I start with Lightning Component? My client don’t even want to move away from classic. Its lots of work and money for them.
Well, here is an Idea what I am doing. I still uses Salesforce classic, still uses Visualforce but behind the scene, magic… tadaaa , Lightning Component. I will show walk you through this, how its being done.
We will use existing Flipcard Lightning Component to display on Visualforce page. Once Lightning Component is created, we need to create a Lightning Application to act an as a container.
LightningOutContainerApp.app
<aura:application access="GLOBAL" extends="ltng:outApp"> <aura:dependency resource="c:FlipCard"/> </aura:application>
In above Lightning Application, we have used access as global so that it can be used anywhere in Salesforce organization like Visualforce. extending ltng:outApp indicates that any component defined in this application can be used on Visualforce page.
Extending from ltng:outApp adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System (SLDS). If you don’t want SLDS resources added to the page, extend from ltng:outAppUnstyled instead.
Next step is to create a Visualforce page where we want to display Lightning Component.
LightningOutDemo.vf
<apex:page >
<apex:includeLightning />
<div style="width:30%;height:100px;" id="FlipcardContainer" />
<script>
$Lightning.use("c:LightningOutContainerApp", function() {
$Lightning.createComponent("c:FlipCard",
{
borderColor : "#16325c",
bgColor : "#16325c" ,
fontColor : "#FFF",
frontText : "What's cool about Lightning Component Development",
backText : "You dont need to enable Lightning experience, It will work on Classic Instance as well"
},
"FlipcardContainer",
function(cmp) {
console.log('Component created, do something cool here');
});
});
</script>
</apex:page>
In above Visualforce page, apex:includeLightning tag imports necessary dependencies and scripts to enable Visualforce to act as Lightning component container.
$Lightning.use() method in JavaScript is used to refer Lightning Application which extends ltng:outApp. $Lightning.createComponent is used to create Lightning Component dynamically.
We can call $Lightning.use() multiple times on a page, but all calls must reference the same Lightning dependency app.
Reference
Leave a Reply