Lightning out: I have two components build to be in Lightning out concept. What I understood from theory is that e.force.NavigateToComponent will not work navigating between the components if the system is in classic mode(which is the case here). So I build two VF page pages and navigating between these two components by using "navigateToURL".
First component(SA_AccountLookup): User enters Account Name and on the click of the button making a server call to fetch Account Information and navigating to the second component.
Second component(SA_OppRenewal): I am trying to see whether I can pre load the Account information that I fetched in the first component. This is where I got stuck where I am not sure how to pass the data from first to second component.
How can I achieve this?
<***Application invoked through Lightning out**>
<aura:application description="SA_OppRenewalApplication" access="global" implements="ltng:allowGuestAccess"
extends="ltng:outApp">
<aura:dependency resource="c:SA_AccountLookup"/>
<aura:dependency resource="c:SA_OppRenewal"/>
</aura:application>
<aura:component description="SA_AccountLookup" controller="SA_AccountLookupController">
<aura:dependency resource="c:SA_OppRenewal"/>
<aura:attribute name="acntName" type="String"/>
<aura:attribute name="accountID" type="String" access="public" />
<lightning:layout horizontalAlign="center">
<lightning:input name="inputAcntName"
aura:id="inputAcntName"
type="String"
label="Account Name"
value="{!v.acntName}"/>
<div class="slds-modal__footer">
<lightning:button label="Continue" variant="brand" onclick="{!c.NavigatetoRenewal}"/>
</div>
</lightning:layout>
</aura:component>
({
NavigatetoRenewal : function(component, event, helper) {
alert(component.get("v.acntName"));
var action = component.get("c.getCustomerInfo");
action.setParams({"acntName": component.get("v.acntName")});
action.setCallback( this, function(response) {
var state = response.getState();
if(state === "SUCCESS"){
component.set("v.accountID",response.getReturnValue());
alert("accountID Value"+component.get("v.accountID"));
****This is where I wanted to pass the account information to the second component****
window.open('/apex/SA_OppRenewalPage');
}
else if(state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
}
})
<aura:component description="SA_OppRenewal" >
<aura:attribute name="act" type="Account" default="{ sobjectType: 'Account' }" />
<aura:attribute name="recordId" type="String" access="public"/>
<div class="slds">
<div class="slds-page-header" role="banner">
<div class="slds-media__body">
<p class="slds-text-heading--label">Account</p>
<h1 class="slds-text-heading--medium">{!v.act.Name}</h1>
</div>
</div>
<div class="slds-form-element slds-m-bottom--small slds-is-required">
<label class="slds-form-element__label" for="Name">Name</label>
<input id="Name" class="slds-input" type="text" value="{!v.act.Name}"/>
</div>
<div class="slds-form-element slds-m-bottom--small slds-is-required">
<label class="slds-form-element__label" for="Name">Estimated Annual Revenue</label>
<input id="Name" class="slds-input" type="text" value="{!v.act.AnnualRevenue}"/>
</div>
<div class="slds-form-element slds-m-bottom--small slds-is-required">
<label class="slds-form-element__label" for="WorkType">Industry</label>
<force:inputField aura:id="pwt" value="{!v.act.Industry}"/>
</div>
</div>
</aura:component>
public with sharing class SA_AccountLookupController {
@AuraEnabled
public static List<Account> getCustomerInfo(String acntName){
List<Account> custInfo = [SELECT Id FROM Account WHERE Name =: acntName];
System.debug('CustomInfo'+custInfo);
return custInfo;
}
}
Best Answer
Try this format for dependencies -