Showing posts with label how to call visualforce page from lightning component. Show all posts
Showing posts with label how to call visualforce page from lightning component. Show all posts

Saturday, July 20, 2019

How to Call VF Page Javascript Method From Lightning Component

In the below example I have demonstrated how to call vf page javascript method from lightning component.

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="VfPageMethod" type="object"/>  <!--Attribute to take Vf page method-->
    <lightning:button label="Click me to pass message to VF page" onclick="{!c.doAction}"/>
</aura:component>


COMPONENT JS CONTROLLER
 
({
doAction : function(component, event, helper) {
var msgForVf="Hi This message was pass from component to me and I am VF page displaying this message";
        var vfMethod=component.get("v.VfPageMethod");
        // Calling Vf page method
        vfMethod(msgForVf,function()
                           {
                             
                             
                           });
}
})



VISUALFORCE PAGE (Name: VfPageToCallLightningComp)


<apex:page >
    <apex:includeLightning />
    <div  id="LightningCompContainer" />
   
    <script>
        $Lightning.use("c:LightningCompForVFAPP", function() {
            $Lightning.createComponent("c:LightningCompForVF", {
            VfPageMethod:getMessageFromComp,
            },
            "LightningCompContainer",
            function(cmp) {
             
            });
        });
    function getMessageFromComp(compMsg)
    {
        alert(compMsg);
    }
    </script>
</apex:page>


LIGHTNING APP (Name: LightningCompForVFAPP)

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

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

</aura:application>