I'm using visual force page to embed my lightning component. Is there a way to get the lightning component data/values(let's say that component has some text box and dropdowns with user input values) from my visual force page ?

1 Answer 1


This is possible you can have communication enabled between lightning component and visualforce both way.

Consider below code:

<apex:page >
    <apex:includeLightning />
    <div id="lightning" />
    <button type="button" onclick="callLightningEvent();">Call Lightning Code From VF</button>
        window.onload = function() {
           $Lightning.use("c:LightningOutExampleApp", function() {               
              var comapp=$Lightning.createComponent("c:LightningOutExample", 
              function(component) {
                console.log('Lightning out -->Component has been loaded.');
                $A.eventService.addHandler({ "event": "c:lightningAppExternalEvent", "handler" : myFunctionFromVisualforce });                

        function callLightningEvent(){
            var lightningEvent = $A.get("e.c:lightningAppEvent");

        function myFunctionFromVisualforce (event){
            console.log('This message is from visualforce function');
            console.log('Data which is coming from lightning component',event.getParam('data'));

Lightning App Code:

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:LightningOutExample"/>

Lightning component code:

<aura:component controller="LightningOutExampleController">
    <aura:attribute name="contacts" type="Contact[]" default="[]"></aura:attribute>

    <aura:handler name="init" value="{!this}" action="{!c.initialize}" />

    <aura:handler event="c:lightningAppEvent" action="{!c.lightningAppEventHandler}"/>

    <aura:registerEvent name="lightningAppExternalEvent" type="c:lightningAppExternalEvent" />

    <aura:iteration items="{!v.contacts}" var="contact">
    <ui:button label="Call Visualforce code from Lightning" press="{!c.callExternalFunction}"/>


Lightning Component Controller Code:

    initialize : function(component, event, helper) {
        var action = component.get("c.getContacts");
        var self = this;
        action.setCallback(this, function(a) {
            var contacts = a.getReturnValue();            
            component.set("v.contacts", contacts);             
            console.log('Contacts are loaded.');

    callExternalFunction : function(component, event, helper){
        console.log('Inside lightning controller function-->callExternalFunction');
        var lightningAppExternalEvent = $A.get("e.c:lightningAppExternalEvent");

    lightningAppEventHandler : function(component, event, helper){
        console.log('Inside lightning controller function-->lightningAppEventHandler');     
        console.log('Value of TestDataKey',event.getParam('data').TestDataKey);     

Lightning Component Apex Controller Code:

public with sharing class LightningOutExampleController {
    public LightningOutExampleController() {


    public static List<Contact> getContacts(){
        return [SELECT Id, Name From Contact ];

This shows communication between lightning component and visualforce code. Here you can pass on data too. This opens up many possibilities in lightning + visualforce development. enter image description here

Hope this answers your question.

  • Hey could you please post your event code also here.
    – gangparia
    Commented Apr 10, 2018 at 7:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .