Call Lightning Component method from Visualforce Page

by Rijwan Mohmmed
0 comment

Hello friends, today we are going to discuss Call Lightning Component method from Visualforce Page. Despite the differences between the two, it is possible to call a Lightning Component method from a Visualforce page. This can be useful if you have existing Visualforce pages that you want to enhance with Lightning Components or if you need to use a Lightning Component that is not available in Visualforce.

Also, check this: Call the Visualforce page method from Lightning

Key Highlights :

  1. Use aura:method to call lightning controller methods from the Visualforce page.

Code :

First of all, we create a target aura component where we send the data.

SourceAura.cmp :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <!--Aura Method-->
    <aura:method name="getDataMethod" action="{!c.callFromVF}" access="global"> 
        <aura:attribute name="message" type="Object" /> 
        <aura:attribute name="name" type="String"/> 
    <!-- Attributes-->
    <aura:attribute name="msg" type="String"/>
    <aura:attribute name="from" type="String"/>
    <aura:attribute name="name" type="String"/>
    <div class="slds-m-around_x-large">
        Name : {!} <br/>
        From : {!v.from} <br/>
        Message : {!v.msg} <br/>


    callFromVF : function(component, event, helper) {
        //Get Parameters
        var params = event.getParam('arguments');
        if (params) {
            //Get Welcome message parameter
            var msg = params.message.message;
            var from = params.message.from;
            //Get name parameter
            var name =;
            component.set("v.msg", msg);
            component.set("v.from", from);
            component.set("", name);

Now we create a Lightning out app so we can use this in VF page.

<aura:application extends="ltng:outApp" access="global">
	<aura:dependency resource="c:SourceAura"/>

Here we create Visualforce page.


    <apex:includeLightning />
    <apex:slds />
    <!--Lightning Container-->
    <div style="width:100%;height:100px;" id="LightningContainer" />
    <script type="text/javascript">
        var component; //Variable for Lightning Out Component
        //Create Lightning Component
        $Lightning.use("c:SourceAuraApp", function() {
            $Lightning.createComponent("c:SourceAura", { },
                                       function(cmp) {
                                           component = cmp;
                                           console.log('Component Created Successfully');
        //Method to call Lightning Component Method
        function sendMessageToAura(){
          	let message = document.getElementById('messageId').value
            component.getDataMethod({message : message, from: "VF Page"}, "Techdicer");
    <apex:form id="form1">
        <div class="slds-p-around_medium">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-01">Message</label>
                <div class="slds-form-element__control">
                    <textarea id="messageId" placeholder="type message" class="slds-textarea"></textarea>
            <!--Button to call Javascript method-->
            <div class="slds-m-top_small slds-text-align_center">
                <button class="slds-button slds-button_brand" onclick="sendMessageToAura();return false;">Send Message To Aura</button>

Output :

Reference :

  1. aura:method

You may also like

Leave a Comment