Use Lightning Component in Visualforce Page

In winter ‘16 a new and powerful feature was  introduced  which allow you to implement your lightning component in visualforce pages.

There are three steps to add Lightning components to a 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 lightning component which collect the information about the contact and add 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 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 user click on Save button of the form, lightning component will call a client side controller method name Save. In Client side controller it call apex class method named “CreateNewContact” with passing the parameter which user inserted in the form to create a contact record in the Salesforce.

Now create a Apex controller to interact with 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 that which components are used by visualforce page. This app is globally accessible and must extends 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.

0 Comments

Leave a Reply

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2019 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?