Saturday, July 20, 2019

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>

No comments:

Post a Comment