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 :
- We use the application event for communication with the VF page.
- We will register the event in the aura component.
- 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>