Using Lightning Out

There is a plugin which is Lightning out to use the lightning component on any app ( Heroku, Visualforce, Node.js)

Lightning out is a framework inside the lightning to connect outside world servers and it will connect using the special library available called/lightning/lightning.out.js and has to be included in visualforce to consume the lightning component

Let’s start to understand what is Lightning Out? and How it will connect visualforce page and Lightning Component.

In this demo, I am retrieving the contacts of accounts and showing on the view.

ApexClass to retrieve contacts

public class ligtningoutCls {
    @AuraEnabled
    public static list<contact> getContacts(Id accId){
        return [select id,Name from contact where accountId =: accId];
    }

}

Create a Simple Lightning Component to Account Information.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" 
                controller="ligtningoutCls">
    <aura:attribute name="recordId" type="Id"/>
    <aura:handler name="init" value="{!this}" action="{!c.getContantList}"/>
    <aura:attribute type="contact[]" name="contacts"/>
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <thead>
            <tr class="slds-text-title_caps" >
                 <th scope="col">Id</th>
            	 <th>Name</th>
            </tr>
        </thead>
        <tbody>
             <aura:iteration items="{!v.contacts}" var="con">
                 <tr>
                     <td class="slds-truncate" scope="row">{!con.Id}</td>
                     <td class="slds-truncate" scope="row">{!con.Name}</td>
                 </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

 

({
  getContantList : function(cmp, event, helper) {
        console.log(cmp.get("v.recordId"));
        var action = cmp.get("c.getContacts");
        action.setParams({
            accId : cmp.get("v.recordId")
        });
        action.setCallback(this,function(res){
            var state = res.getState();
            if(state ==='SUCCESS'){
                cmp.set("v.contacts",res.getReturnValue());
            }
        })
        $A.enqueueAction(action);
  }
})

Now create the lightning App and associate the above created lightning component.

<aura:application extends="ltng:outApp" >
    <aura:dependency resource="c:lightningOutCmp"/>
</aura:application>

<aura:dependency /> is a dependency tag and telling the application, that there are some dependencies to run the application.

Now Finally create the visual force page

with lightningOutVFpage

<apex:page standardController="Account">
   
    <apex:includeLightning />
    <div id="lightning" />

    <script>
        $Lightning.use("c:lightningOutApp", function() {
          $Lightning.createComponent("c:lightningOutCmp",
          {'recordId': '{!Account.Id}'},
          "lightning",
          function(cmp) {
          });
        });
    </script>
</apex:page>

https://yourDomainName.visual.force.com/apex/testLighthingOut?id=AccountId

here is the list of contacts on my display,

 

One thought on “Using Lightning Out

Leave a Reply

Your email address will not be published. Required fields are marked *