function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Siva SakthiSiva Sakthi 

How to pass the parameters from VF Page into Lightning Component

Hi,
                  I am creating the lightning component with a leaflet map and access via Visualforce page. In that page created the drop down with contact list. Based on list value i select what are records set the Location ( Latitude and Longitude ) the map will refresh.

I have doubt how to pass the parameter of the list values into the lightning component. Guide me how to achieve this

This Error I got Using the 'Firing Lightning Events from Non-Lightning Code ' Method:

Uncaught SecurityError: Blocked a frame with origin "https://lightnapp-dev-ed--c.ap2.visual.force.com" from accessing a frame with origin "https://lightnapp-dev-ed.my.salesforce.com". Protocols, domains, and ports must match.

My Code:
==========

<apex:page showHeader="false" controller="ContactLocatorController">
<apex:includeLightning />
<div id="lightning" >
<script>
var myExternalEvent;
if(window.opener.$A && (myExternalEvent = window.opener.$A.get("e.c:ContactsSelected"))) {
       myExternalEvent.setParams({});
       myExternalEvent.fire();
}

var visualForceFunction = function(event) {
      var EventData = event.getParam("contact");
      console.log('::::::::::',EventData);
};
$Lightning.use("c:ContactLocatorApp", function()  {
       $Lightning.createComponent("c:ContactLocator",
        { },
         "lightning",
          function(cmp) {
               $A.eventService.addHandler({ "event": "c:ContactsSelected", "handler" : visualForceFunction});
               //alert('handler test');
         });
});
</script>
<apex:form >
<apex:outputText label="You Have Selected : " value="{!selectedContact}"/>
<apex:selectList size="1" value="{!selectedContact}">
<apex:selectOptions value="{!ContactsList}" />
<!-- <apex:actionSupport event="onchange" oncomplete="function(this)"/>-->
</apex:selectList><br/>
</apex:form> </div>
</apex:page>

Advance Thanks
Michał Zadrużyński 2Michał Zadrużyński 2
Why don't you make whole page inside ContactLocator component?
Siva SakthiSiva Sakthi
My requirement is show the lightning component in Vf page then pass the parameters from this vf page into lightning component. Please guide me how to solve this.
Michał Zadrużyński 2Michał Zadrużyński 2
if you want just to pass attributes to component you can do this in this line: 
$Lightning.use("c:ContactLocatorApp", function()  {
       $Lightning.createComponent("c:ContactLocator",
        { }, //<- here between {}
         "lightning",
          function(cmp) {
               $A.eventService.addHandler({ "event": "c:ContactsSelected", "handler" : visualForceFunction});
               //alert('handler test');
         });
});

 
Siva SakthiSiva Sakthi
               Based on the value change i have call the script . when we select the values means whole page to br refresh. but i want to shpw that particular contact have longitude and latitude in that map have to redirect the location. Not refersh that particular portation whole page getting refreshed. Please guide me to solve this...


<apex:form >
      <apex:outputText label="You Have Selected : " value="{!selectedContact}"/>
      <apex:selectList size="1" value="{!selectedContact}" onchange="getRemoteAccount();">
          <apex:selectOptions value="{!ContactsList}" id="contactSelect" />
      </apex:selectList><br/>  
    </apex:form>

<script>
function getRemoteAccount() {
            //Adding Lightning Component Here
            $Lightning.use("c:ContactLocatorApp", function() {
                $Lightning.createComponent("c:ContactLocator",
                      {contact:"contact"}, //------> Here i have passed the selected contact via value change. 
                      "lightning",
                      function(cmp) {
                        // any further setup goes here
                });
            }); 
        }  
</script>

Thanks