Call Lightning Component method from Visualforce Page

by Rijwan Mohmmed
1 comment
call-lightning-component-method-from-visualforce-page

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"/> 
    </aura:method>
    
    <!-- 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 : {!v.name} <br/>
        From : {!v.from} <br/>
        Message : {!v.msg} <br/>
    </div>
</aura:component>

SourceAuraController.JS:

({
    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 = params.name;
            component.set("v.msg", msg);
            component.set("v.from", from);
            component.set("v.name", name);
        }
    }
})

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

SourceAuraApp.app:

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

Here we create Visualforce page.

FromTargetVF.vfp:

<apex: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", { },
                                       "LightningContainer",
                                       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");
        }
    </script>
    
    <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>
                </div>
            </div>
            <!--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>
            </div>
        </div>
    </apex:form>
</apex:page>

Output :

Reference :

  1. aura:method
What’s your Reaction?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

You may also like

1 comment

Mohan March 20, 2024 - 9:04 am

Nice Article

Reply

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.