Call Visualforce page method from Lightning component

Hello friends, today we are going to discuss the Call Visualforce page method from Lightning component. To send data from a Lightning Component to a Visualforce page, we can create a custom event in the Lightning Component and pass the data as a parameter. The Visualforce page can then listen for the custom event and retrieve the data.

Also, check this: Slider / Carousel Images in LWC

Key Highlights :

1. We use the application event for communication with the VF page.
2. We will register the event in the aura component.
3. Also, fire this event from the Aura component and catch it by VF Page.

Code :

First of all, we create an application event.

SendDataEvent.evt:

<aura:event type="APPLICATION">
    <aura:attribute name="name" type="String"/>
    <aura:attribute name="from" type="String"/>
    <aura:attribute name="msg" type="String"/>
</aura:event>

Now we create an aura component where create a form to get data from the user and after clicking, the button sends data to VF page.

SourceAura.cmp:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <!--This event used to send the data to vf page-->
    <aura:registerEvent name="vfEvent" type="c:SendDataEvent"/>
    
    <!-- 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">
        <lightning:input name="name" label="Enter Name" value="{!v.name}"/>
        <lightning:input name="from" label="Enter From" value="{!v.from}"/>
        <lightning:input name="msg" label="Enter Message" value="{!v.msg}"/>
        <div style="text-align: center" class="slds-m-top_x-small">
            <lightning:button variant="brand" label="Send Data To VF Page" onclick="{!c.sendDataToVFPage}" />
        </div>
    </div>
</aura:component>

SourceAuraController.JS:

({
    sendDataToVFPage : function(component, event, helper) {
        let name = component.get('v.name');
        let from = component.get('v.from');
        let msg = component.get('v.msg');
        
        var myEvent = $A.get("e.c:SendDataEvent");
        myEvent.setParams({
            name: name,
            from: from,
            msg: msg,
        });
        myEvent.fire();
    }
})

Here we create a Lightning App so we can use above component in VF Page.

SourceAuraApp.app:

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

Now we create a Visualforcr Page so we can get data from Aura component.

VfPageGetData.vfp:

<apex:page standardController="Account">
    <apex:pageMessages />
    <apex:includeLightning />
    <div id="auracomponent" />
    
    <apex:pageBlock title="Showing data from visualforce page">
        <apex:pageBlockSection>
            <apex:pageBlockSectionItem>
                <apex:outputLabel value="Name" />
                <apex:outputText styleClass="name" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem>
                <apex:outputLabel value="From" />
                <apex:outputText styleClass="from" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem>
                <apex:outputLabel value="Message" />
                <apex:outputText styleClass="msg" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock> <br/><br/>

    <script>
        // Calling Lightning component from vf page
        $Lightning.use("c:SourceAuraApp", function () {
            $Lightning.createComponent("c:SourceAura", {},
                "auracomponent",
                function (component) {
                    console.log("Lightning component rendered successfully!!");
                    // Event Service hander to handele the lightning component cusom event
                    $A.eventService.addHandler({ "event": "c:SendDataEvent", "handler": retriveEventData });
                });
        });


        function retriveEventData(event) {
            var name = event.getParam("name");
            var from = event.getParam("from");
            var msg = event.getParam("msg");

            // passing data to outputtext lables
            document.getElementsByClassName("name")[0].innerHTML = name;
            document.getElementsByClassName("from")[0].innerHTML = from;
            document.getElementsByClassName("msg")[0].innerHTML = msg;
        }

    </script>
</apex:page>

Output :

Reference :

1. Events