Use Salesforce Lightning Component in Visualforce Page

In winter ‘16 a new and powerful feature was introduced which allows you to implement your Salesforce Lightning Component in Visualforce pages.

There are three steps to add Lightning components to a Salesforce Visualforce page.

1. Add the <apex:includeLightning /> component to your Visualforce page.
2. Reference a Lightning app that declares your component dependencies with $Lightning.use().
3. Write a function that creates the component on the Visualforce page with $Lightning.createComponent().

I want to create a form using a Salesforce lightning component that collects the information about the contact and adds this component in a Visualforce page.

Lightning Component:

Create a Lightning component named FormContact.cmp

<aura:component controller=”ContactController”>
    <aura:attribute name=”NewCon” 
        type=”Contact” 
        default=”{ 
            ‘sobjectType’: ‘Contact’,
             ‘FirstName’: ”,
             ‘LastName’: ”,
             ‘Email’: ”, 
             ‘Phone’: ”
        }”/>        
    <form>        
        <ui:inputText value=”{!v.NewCon.FirstName}” label=”First” class=”form-control”/>
        <ui:inputText value=”{!v.NewCon.LastName}” label=”Last” class=”form-control” />
        <ui:inputEmail value=”{!v.NewCon.Email}” label=”Email” class=”form-control” />
        <ui:inputText value=”{!v.NewCon.Phone}” label=”Phone Number” class=”form-control”/>
        <ui:button label=”Save” press=”{!c.save}”/>
    </form>
</aura:component>

Creating a client-side controller for the lightning component.

FormContactController.js:

({
    save : function(component, event) {
        var getCon = component.get(“v.NewCon”);
        var action = component.get(“c.CreateNewContact”);
        action.setParams({ 
            “con”: getCon
        });
        action.setCallback(this, function(a) {
            var state = a.getState();
            if (state === “SUCCESS”) {
                var name = a.getReturnValue();
            }
        });
        $A.enqueueAction(action)
    }
})

When the user clicks on the Save button of the form, the Salesforce lightning component will call a client-side controller method name Save. In the Client-side controller, it calls the apex class method named “CreateNewContact” with passing the parameter which the user inserted in the form to create a contact record in the Salesforce.

Now create an Apex controller to interact with the server-side and client-side.

public with sharing class ContactController {
    @AuraEnabled
    public static Contact CreateNewContact (Contact con) {
        upsert con;
        return con;
    }
}

Lightning App:

Now create a Lightning App named myLightningApp, it is responsible for declaring which components are used by the Visualforce page. This app is globally accessible and must extend ltng:outApp.

<aura:application access=”GLOBAL” extends=”ltng:outApp” >
    <c:FormContact />
</aura:application>

Visualforce Page:

Add at the beginning of your page. This component loads the JavaScript file used by Lightning Components for Visualforce. Then uses the $Lightning.use to declare which Lightning App is used in the Visualforce page, and creates the component with the $Lightning.createComponent method. The $Lightning.createComponent pass the name of the component, an object containing attributes, the ID of the HTML element that is where the component should be placed, and a callback function that is executed when the component is created.

<apex:page standardController=”Contact”>        
    <apex:includeLightning />
    <div id=”Con” />
    <script>
        $Lightning.use(“c:myLightningApp”, function() {
            $Lightning.createComponent(
                “c:FormContact”,
                {},
                “Con”,
                function(cmp) {
                    console.log(“Component is created!”);
                    console.log(cmp);
                });
            });        
      </script>
</apex:page>

Note:- You can call $Lightning.use() multiple times on a page, but all calls must reference the same Lightning dependency app.