4

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 ?

10

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>
    <script>        
        window.onload = function() {
           $Lightning.use("c:LightningOutExampleApp", function() {               
              var comapp=$Lightning.createComponent("c:LightningOutExample", 
              {},             
              "lightning",
              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");
            lightningEvent.setParams({'data':{'TestDataKey':'TestDataValue'}});
            lightningEvent.fire();
        }

        function myFunctionFromVisualforce (event){
            console.log('This message is from visualforce function');
            console.log('Data which is coming from lightning component',event.getParam('data'));
            debugger;
        }
    </script>
</apex:page>

Lightning App Code:

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

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">
        <h1>{!contact.Name}</h1>
    </aura:iteration> 
    <ui:button label="Call Visualforce code from Lightning" press="{!c.callExternalFunction}"/>

</aura:component>

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.');
        });
        $A.enqueueAction(action);
    },

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

    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() {

    }

    @AuraEnabled
    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 Apr 10 '18 at 7:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.