I have managed to get fields from two different objects to display in one lighting component but I am having a few problems off the back of this.
When saving it will only save the main record and wont create a new record for the Budget Planner object. Also when using the two Name fields it saves the input from the Budget Planner Name in the Factfind record even when i define a factfind name in the field.
Here is my cmp
<aura:component implements="force:hasRecordId,force:lightningQuickActionWithoutHeader,flexipage:availableForRecordHome"
access="global">
<aura:attribute name="selTabId" type="string" default="Objective" />
<lightning:navigation aura:id="navService"/>
<!--Style-->
<aura:html tag="style">
.slds-modal__container{
height : auto;
width: 70%;
max-width: 70rem;
}
.modal-body{
height : 750px !important;
max-height: 750px !important;
}
.customFooter{
display: inline !important;
}
</aura:html>
<!--Content-->
<aura:if isTrue="{!!v.saved}">
<lightning:recordEditForm objectApiName="Factfind__c"
onsubmit="{!c.handleSubmit}"
onsuccess="{!c.handleSuccess}">
<lightning:messages />
<lightning:tabset selectedTabId="{!v.selTabId}" variant="vertical" class="slds-modal__content slds-p-around_x-small">
<lightning:tab label="Objectives" id="Objective">
<h2>TFC Section</h2>
<p>This is the record id {!v.recordId}</p>
<div style="width: 50%; padding: 14px;" class="slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="Opportunity__c" value="{!v.recordId}"/>
<p/><br/>
<lightning:inputField fieldName="Name"/>
<p/><br/>
<lightning:inputField fieldName="WantsImmediateTFC__c"/>
<p/><br/>
<lightning:inputField fieldName="RequiredTFCAmount__c"/>
</div>
<p/><br/>
<table style="width: 100%">
<tr>
<td>
<lightning:inputField fieldName="X1_Why_Do_You_Require_TFC__c"/>
</td>
<td>
<lightning:inputField fieldName="X1TFCAmountNeeded__c"/>
</td>
</tr>
<tr>
<td>
<lightning:inputField fieldName="X2WhyDoYouRequireTFC__c"/>
</td>
<td>
<lightning:inputField fieldName="X2TFCAmountNeeded__c"/>
</td>
</tr>
<tr>
<td>
<lightning:inputField fieldName="X3WhyDoYouRequireTFC__c"/>
</td>
<td>
<lightning:inputField fieldName="X3TFCAmountNeeded__c"/>
</td>
</tr>
<tr>
<td>
<lightning:inputField fieldName="X4WhyDoTheyRequireTFC__c"/>
</td>
<td>
<lightning:inputField fieldName="X4TFCAmountNeeded__c"/>
</td>
</tr>
</table>
<div style="float: right; width: 50%; padding: 14px">
<lightning:inputField fieldName="TotalTFCBeingUsedForReasons__c"/>
</div>
</lightning:tab>
<lightning:tab label="Occupation/Income" id="OccuIncome">
<div>
NAHHHHHHHHH
</div>
</lightning:tab>
<lightning:tab label="Assets and Debt" id="AssDebt">
Im WITH MY
</lightning:tab>
<lightning:tab label="Budget Planner" id="BudgetPlan">
<lightning:recordEditForm objectApiName="Budget_Planner__c"
onsubmit="{!c.handleSubmit}"
onsuccess="{!c.handleSuccess}">
<lightning:messages />
<div>
<lightning:inputField fieldName="Name"/>
<p/><br/>
<lightning:inputField fieldName="MainEmploymentNetMonthlyIncome__c"/>
<p/><br/>
<lightning:inputField fieldName="Opportunity__c" value="{!v.recordId}"/>
<p/><br/>
<lightning:inputField fieldName="TotalAmountOfStateBenefits__c"/>
</div>
</lightning:recordEditForm>
</lightning:tab>
<lightning:tab label="Retirement Plans" id="RetirePlan">
</lightning:tab>
<lightning:tab label="Tick List" id="TickList">
</lightning:tab>
<lightning:tab label="ATR" id="Atr">
</lightning:tab>
<lightning:tab label="Switch Questions" id="SwitchQs">
Switch questions
</lightning:tab>
<lightning:tab label="Annuity Basis" id="AnnBas">
Annuity Basis
</lightning:tab>
<lightning:tab label="House Keeping" id="HouseKeep">
House Keeping
</lightning:tab>
<lightning:tab label="Fact Find Complete" id="Complete">
Fact Find has been completed!
</lightning:tab>
</lightning:tabset>
<!--Footer-->
<div class="slds-m-top_medium">
<div class="slds-docked-form-footer slds-modal__footer customFooter" style="height:55px;">
<div style="float:left;">
<lightning:button label="Cancel" onclick="{!c.closeQuickAction}"/>
<lightning:button disabled="{!v.disabled}" type="submit" label="Save" variant="brand" name="save"/>
</div>
<div style="float:right;">
<lightning:button disabled="{!v.selTabId == 'Objective'}" variant="neutral" label="Back" onclick="{!c.back}"/>
<lightning:button variant="brand" label="Next" onclick="{!c.next}"/>
</div>
</div>
</div>
</lightning:recordEditForm>
<aura:set attribute="else">
<p>Saved! New record id is {!v.recordId}</p>
</aura:set>
</aura:if>
</aura:component>
and here is my controller:
({
closeQuickAction : function(component, event, helper) {
// Close the action panel
var dismissActionPanel = $A.get("e.force:closeQuickAction");
dismissActionPanel.fire();
},
handleSubmit : function(component, event, helper) {
console.log("this is a test");
//Display toast message
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
"title": "Success!",
"message": "Factfind has been created.",
"type": "success"
});
toastEvent.fire();
},
handleSuccess: function(cmp, event, helper) {
var params = event.getParams();
var dismissActionPanel = $A.get("e.force:closeQuickAction");
dismissActionPanel.fire();
cmp.find("navService").navigate({
"type": "standard__recordPage",
"attributes": {
"recordId": params.response.id,
"objectApiName": "Factfind__c",
"actionName": "view"
}
});
},
next : function(component, event, helper) {
// get the current selected tab value
var currentTab = component.get("v.selTabId");
if(currentTab == 'Objective'){
component.set("v.selTabId" , 'OccuIncome');
}else if(currentTab == 'OccuIncome'){
component.set("v.selTabId" , 'AssDebt');
}else if(currentTab == 'AssDebt'){
component.set("v.selTabId" , 'BudgetPlan');
} else if(currentTab == 'BudgetPlan'){
component.set("v.selTabId" , 'RetirePlan');
} else if(currentTab == 'RetirePlan'){
component.set("v.selTabId" , 'TickList');
} else if(currentTab == 'TickList'){
component.set("v.selTabId" , 'Atr');
} else if(currentTab == 'Atr'){
component.set("v.selTabId" , 'SwitchQs');
} else if(currentTab == 'SwitchQs'){
component.set("v.selTabId" , 'AnnBas');
} else if(currentTab == 'AnnBas'){
component.set("v.selTabId" , 'HouseKeep');
} else if(currentTab == 'HouseKeep'){
component.set("v.selTabId" , 'Complete');
}
},
back : function(component, event, helper) {
// get the current selected tab value
var currentTab = component.get("v.selTabId");
if(currentTab == 'OccuIncome'){
component.set("v.selTabId" , 'Objective');
} else if(currentTab == 'AssDebt'){
component.set("v.selTabId" , 'OccuIncome');
}else if(currentTab == 'BudgetPlan'){
component.set("v.selTabId" , 'AssDebt');
} else if(currentTab == 'RetirePlan'){
component.set("v.selTabId" , 'BudgetPlan');
} else if(currentTab == 'TickList'){
component.set("v.selTabId" , 'RetirePlan');
} else if(currentTab == 'Atr'){
component.set("v.selTabId" , 'TickList');
} else if(currentTab == 'SwitchQs'){
component.set("v.selTabId" , 'Atr');
} else if(currentTab == 'AnnBas'){
component.set("v.selTabId" , 'SwitchQs');
} else if(currentTab == 'HouseKeep'){
component.set("v.selTabId" , 'AnnBas');
} else if(currentTab == 'Complete'){
component.set("v.selTabId" , 'HouseKeep');
}
}
})
Any help pointing me in the right direction will be greatly appreciated :)
update
This is my new controller in which i am getting this error Uncaught Action failed: c:JackBPTest$controller$mainSave [Cannot read property 'id' of undefined]
handleSubmit : function(component, event, helper) {
console.log("this is a test");
//Display toast message
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
"title": "Success!",
"message": "Factfind has been created.",
"type": "success"
});
toastEvent.fire();
},
handleSuccessForBP : function(cmp, event, helper) {
console.log('Both Records Saved')
},
handleSuccessForObj : function(cmp, event, helper) {
component.find("budgetPlanner").submit();
},
mainSave : function(cmp, event, helper) {
cmp.find("Objective").submit();
var params = event.getParams();
var dismissActionPanel = $A.get("e.force:closeQuickAction");
dismissActionPanel.fire();
cmp.find("navService").navigate({
"type": "standard__recordPage",
"attributes": {
"recordId": params.response.id,
"objectApiName": "Factfind__c",
"actionName": "view"
}
});
},