I have two lightning components Opportunity Component and Account component(I added these two components in 2 VF pages respectively). On Opportunity component when I click on lookup icon it will take to VF page which has Account component. On this page I want to select one account and pass that value to Opportunity component(Account Id value).

Can anyone please help me on this ?

VF Page : oppPage

    <apex:includeLightning />
        $Lightning.use("c:oppcomponentApp", function() {
                {objName: 'Opportunity',fieldAPIName:'field__c'},
                    console.log("component has been created.");
    <div id="opps" />

Component : OppComponent :

<aura:component controller="controller" implements="force:appHostable,force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="newOpp" type="Opportunity" access="global" default="{'sobjectType': 'Opportunity'}"/>
<aura:attribute name="Acc ID" type="String[]" />

            <div class="slds-button-group" role="group">
                <ui:button label="Save" press="{!c.saveopp}"
                <ui:button label="Cancel" press="{!c.cancel}"

<!-- first row -->
                <div >
                    <ui:inputText aura:id="opptyName" class="slds-input slds-form-element__label" 
                                  label="Opportunity Name"  value="{!v.newOpp.Name}" required="true"/>

                    <ui:inputText aura:id="Acc" label="Account ID"   required="true"/>
                        <button type="button" onclick="{!c.goToVfpage}" >
                        <img src="/resource/14978732072/Lookupimg" height="20" width="20"/>


            <!-- first row -->

OppComponentcontroller.js :

goToVfpage : function (component, event, helper) {
      var urlEvent = $A.get("e.force:navigateToURL");
    if(urlEvent) {
        "url": "/apex/AccPage"

    } else {

        window.open("/apex/AccPage", "_blank");


VF Page:AccPage

<div id="lightning" />

        $Lightning.use("c:AccountApp", function() {
                                       {label: ""}, 
                                       function(cmp) {
                                           //  Do some stuff


<aura:component controller="AccController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" 
     <aura:attribute name="accountId" type="String" /> 
    <aura:attribute name="accounts" type="Account[]" />   

            <div align="center" >
            <ui:button label="Select"/> **<!-- when clicked on this button it should take the selected account id value and add it to the input text Account ID on Opp component before creating opportunity-->**
            <ui:button label="Cancel"/>
        <div >

                <table class="slds-table slds-table--bordered slds-table--fixed-layout  slds-no-row-hover" role="grid">
                    <tr class="slds-text-heading--label ">                                                        
                        <td role="gridcell" class="slds-cell-shrink" scope="col">

                            <label class="slds-checkbox">                      

                        <th scope="col" aura:id="AccName" aria-label="Account"><span class="slds-truncate" title="Account">Account</span></th>
                        <th scope="col" aura:id="accid" aria-label="Account ID"><span class="slds-truncate" title="Account ID">Account ID</span></th>

            <aura:iteration items="{!v.accounts}" var="ac" >         
                <c:AccountRow acc="{!ac}" /> 



In lightning there are two ways to pass data from one component to other.

  1. Events (component level and application level)
  2. Bound expressions

But in your case i think application level events will be helpful. Hope this will help you.

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.