Expose your lightning components in a visualforce page

As winter 16 got into every Salesforce environment. It has brought new exciting features in lightning development and experience.

Lightning components are getting better every new release. Lets look at one of the interesting feature that winter 16 has given in the hands of developers ie., expose your lightning components in a visual force page.

This feature really helps if you are developing a feature in lightning and expose it to all interfaces of Salesforce like a decade old Salesforce classic , Newly born Lightning experience and Salesforce1 mobile app.

Here is a lightning component which says Hello to you.

<aura:component >
    <h1>Hello Geeky developers :)</h1>	
</aura:component>

Now lets expose it to the Salesforce world through visualforce page.

The following are the foot steps we want to follow to help this little lightning component laugh to get expose.

  1. A lightning app which exposes the lightning component.
  2. A visualforce page which displays the lightning component. 

A lightning app which exposes the lightning component

  • Create a lightning app and name it as you wish.
  • Now make the app available for visualforce by making its access to GLOBAL and use the interface ltng:outApp.
  • Add the lightning component in the dependency of the app using aura:dependency tag.

The app code will look like this

<aura:application access="GLOBAL" extends="ltng:outApp">
    <!-- 
		heatspace is the namespace in my org.
		If your org has not name space then use c instead of heatspace.
		Then your code will look something like this
		<aura:dependency resource="c:HelloWorld"/>
	 -->
    <aura:dependency resource="heatspace:HelloWorld"/>
	
</aura:application>

A visualforce page which displays the component

  • Include a JavaScript file in your visualforce page.
  • Tell your visualforce page which Lightning app to use by using the below method.
    • $Lightning.use("theNamespace:lcvfTest", function() {});

       

  • Write a function that creates the component on the page.
    •  $Lightning.createComponent(String type, Object attributes, String locator, function callback);

       

Your visualforce page looks like this.

<apex:page standardStylesheets="false" showHeader="false" sidebar="false">
   
    <!-- Include a JavaScript file in your Visualforce page -->
    <apex:includeScript value="/lightning/lightning.out.js" />

    <div id="lightning" />

    <script>
    //Tell your Visualforce page to use ExposeVF Lightning app
        $Lightning.use("heatspace:ExposeVF", function() {
            // Write a function that creates the component on the page
          $Lightning.createComponent("heatspace:HelloWorld",
          {},
          "lightning",
          function(cmp) {
            // do some stuff
          });
        });
    </script>

</apex:page>

 

$Lightning.createComponent(String type, Object attributes,String locator, function callback) function is similar to $A.createComponent(), but includes an additional locator parameter that specifies the ID of the DOM node where you want the component inserted.

So finally your output will be something like the following screen shot.

Let me know your thoughts in comments.

Happy coding smiley !!!

 

Rating: 
Average: 5 (1 vote)