Connecting Lightning Components and Visualforce

It’s a busy time. Since January I have been preparing to teach the new ‘Programming Lightning Components‘ course (DEV601) for Salesforce University. It is an excellent in-depth 5 day course. I have taught it twice over the last 5 weeks and am due to teach it again next week. Feedback from attendees has been very positive.

As you interact on these courses you always learn new things, and an interesting add on to Lightning out for Visualforce is worth sharing.

Lightning Out for Visualforce

Lightning Out for Visualforce allows for the embedding of Lightning Components via javascript in a Visualforce page. In order to use it, a visualforce page requires

  • a platform provided javascript library ‘/lightning/lightning.out.js’. There is alternatively a new visualforce tag ‘<apex:includeLightning />’ that can be used.
  • the Lightning Components must be added as an aura dependency to a Lightning Application. Many Lightning Components can be used in this application.
  • The Lightning Application must extend an interface ‘ltng:outApp’.

Currently, the only way to use a Lightning Component in Salesforce Classic (Aloha) is through Lightning Out for Visualforce.

Visualforce Interacting with a Lightning Component

It is possible to call javascript functions in the Lightning Component from Visualforce. The example below uses a built-in callback function provided in the $Lightning.createComponent function to save a reference to the component in the context of the JavaScript in the page.

In the below example, the Visualforce page will display a Lightning Component called ‘lightSabre’ (via a Lightning Application called ‘LightSabreApp’) which as a button that plays a sound. Once the Component is created in the ‘lightSabreDiv’ DOM element, the callback function (which takes a parameter of the component being created) can be used to apply the component reference to a javascript variable in the Visualforce page.

<apex:page >    
    <script src="/lightning/lightning.out.js"></script>
    

<div id="lightSabreDiv"></div>


    <a href="#" onclick="pressButton()">PRESS (to call function within c:LightSabre Controller)</a>

    <script>
        var component;

    	function pressButton() {
            component.helper.playSound(component);
        }
    
        $Lightning.use("c:LightSabreApp", function() {
            $Lightning.createComponent(
                "c:LightSabre",
                {},
                "lightSabreDiv",
                function(cmp) {
                    component = cmp;
                }
            );            
        });
    
    </script>
    
</apex:page>

Lightning Application Markup:

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:LightSabre" />        
</aura:application>

The page can then call functions within the component. In this case the ‘pressButton()’ javascript function is directly calling a function in the helper of the Lightning Component that plays the sound (in this case a static resource).

Component Markup:

<aura:component description="Linking Visualforce to Lightning">


<div class="centered">
      <ui:button label="Light Sabre!!" press="{!c.playbackBegin}" />
      <audio aura:id="audiofile" src="/resource/lightsaber"></audio>
</div>


</aura:component>

Component Controller:

({
    playbackBegin : function(component, event, helper) { 
        var audioEl = component.find('audiofile').getElement();
        audioEl.play();
    }
})

Component Helper:

({
    playSound : function(component) { 
        var audioEl = component.find('audiofile').getElement();
        audioEl.play();
    },
})

Lightning Out for Visualforce went GA in the Spring 16 release. Lightning Out will also be available for any external site (with authentication) and through the Mobile SDK – these features are in pilot at time of writing and will be available in a future release.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s