{"id":5737,"date":"2016-09-22T17:40:16","date_gmt":"2016-09-22T17:40:16","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5737"},"modified":"2017-04-05T11:48:40","modified_gmt":"2017-04-05T11:48:40","slug":"use-lightning-component-in-visualforce-page","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-component-in-visualforce-page\/","title":{"rendered":"Use Lightning Component in Visualforce Page"},"content":{"rendered":"

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\u00a0with 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.<\/p>\n

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.<\/p>\n

We will use existing Flipcard Lightning Component<\/a> to display on Visualforce page. Once Lightning Component is created, we need to create a Lightning Application to act an as a container.<\/p>\n

LightningOutContainerApp.app<\/span><\/p>\n

\r\n<aura:application access="GLOBAL" extends="ltng:outApp">\r\n\t<aura:dependency resource="c:FlipCard"\/>\r\n<\/aura:application>\r\n<\/pre>\n
In above Lightning Application, we have used access as global so that it can be used anywhere in Salesforce organization like Visualforce. extending\u00a0ltng:outApp<\/strong> indicates that any component defined in this application can be used on Visualforce page.<\/p>\n
\n
Extending from ltng:outApp<\/strong> adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System (SLDS). If you don\u2019t want SLDS resources added to the page, extend from ltng:outAppUnstyled<\/strong> instead.<\/p>\n<\/blockquote>\n
Next step is to create a Visualforce page where we want to display Lightning Component.<\/p>\n
LightningOutDemo.vf<\/span><\/p>\n
\r\n<apex:page >\r\n <apex:includeLightning \/>\r\n\r\n <div style="width:30%;height:100px;" id="FlipcardContainer" \/>\r\n\r\n <script>\r\n $Lightning.use("c:LightningOutContainerApp", function() {\r\n $Lightning.createComponent("c:FlipCard",\r\n { \r\n borderColor : "#16325c", \r\n bgColor : "#16325c" ,\r\n fontColor : "#FFF",\r\n frontText : "What's cool about Lightning Component Development",\r\n backText : "You dont need to enable Lightning experience, It will work on Classic Instance as well"\r\n },\r\n "FlipcardContainer",\r\n function(cmp) {\r\n console.log('Component created, do something cool here');\r\n });\r\n });\r\n <\/script>\r\n<\/apex:page>\r\n<\/pre>\n
In above Visualforce page,\u00a0apex:includeLightning <\/strong>tag\u00a0imports necessary dependencies and scripts to enable Visualforce to act as Lightning component container.<\/p>\n
$Lightning.use()<\/strong> method in JavaScript is used to refer Lightning Application which extends ltng:outApp<\/em>.\u00a0$Lightning.createComponent<\/strong> is used to create Lightning Component dynamically.<\/p>\n
We\u00a0can call $Lightning.use()<\/strong> multiple times on a page, but all calls must reference the same Lightning dependency app.<\/p>\n
Reference<\/strong><\/p>\n