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>

1 comment:

  1. How do you call your visualforce page inside the Lightning component's JS? I don't see VF page's name anywhere inside the lightning component.

    ReplyDelete