How to pass record id from VF page to lightning component.

In the below example i will demonstrate how to pass the id of record from Visualforce page to Lightning component. 

Prerequisite: Put the Visualforce page in record detail page.


COMPONENT (Name: LightningCompForVF)


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<div>
    HI I AM COMPONENT AND I AM GETTING CALLED FROM VF.
    </div>
    <aura:attribute name="AccIDFromVfPage" type="string"/>
 
    <lightning:button label="Check ID from Vf" onclick="{!c.doAction}"/>
</aura:component>


COMPONENT JS CONTROLLER


({
doAction : function(component, event, helper) {

        var accIdFromVf=component.get("v.AccIDFromVfPage");
        alert('Id of record from Vf page'+accIdFromVf);
}
})


LIGHTNING APP (Name: LightningCompForVFAPP)


<aura:application access="GLOBAL" extends="ltng:outApp">

    <aura:dependency resource="c:LightningCompForVF"/>

</aura:application>



VISUALFORCE PAGE (Name: VfPageToCallLightningComp)


<apex:page standardController="account" >
    <apex:includeLightning />
    <div  id="LightningCompContainer" />
   
    <script>
        $Lightning.use("c:LightningCompForVFAPP", function() {
            $Lightning.createComponent("c:LightningCompForVF", {
            },
            "LightningCompContainer",
            function(component) {
               component.set("v.AccIDFromVfPage",'{!$CurrentPage.parameters.id}');
            });
        });
 
    </script>
</apex:page>

TAGS:

How to pass record id from VF page to lightning component,pass parameter from visualforce page to lightning component,pass parameter to lightning component,how to pass record id in lightning component,get record id in visualforce page,how to pass record id in url in salesforce lightning,vf page in lightning component,lightning component url,get record id from url in lightning component