How to save record from a different object using nested recordEditForm

Question

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"
            }
        });
    },

Pranay Jaiswal · Accepted Answer · 2019-08-19 11:21:32Z

The save button exists only on outer lightning:recordEditForm, thus pressing save will only save the outer record.

Also, as its nested, the Markup gets confused for which Object's Name you are referring. It picks up last occurrence of Name and sets it for the Outer forms's submit.

Instead of nesting lightning:recordEditForm inside lightning:recordEditForm , have a common parent and put these 2 as siblings. You are using tabs, you can use them.

Markup :

<lightning:tabset>
        <lightning:tab label="FactFindForm">
            <lightning:recordEditForm objectApiName="Factfind__c" aura:id="factFinder"
                              onsuccess="{!c.handleSuccessForFactfind}">

            //Fields here
            </Lightning:recordEditForm>
        </lightning:tab>
        <lightning:tab label="Budget Planner" title="Budgett Planner">
            <light<lightning:recordEditForm objectApiName="Budget_Planner__c" aura:id="budgetPlanner"
                                          onsuccess="{!c.handleSuccessForBudgetPlanner}">

            //Fields here
            </Lightning:recordEditForm>
        </lightning:tab>

</lightning:tabset>

<lightning:button disabled="{!v.disabled}" onclick="{!c.mainSave}" label="Save" variant="brand" name="save"/>

Javascript :

mainSave(component , event , helper){
    component.find("factFinder").submit();

}

handleSuccessForFactfind(component , event , helper){
    component.find("budgetPlanner").submit();
}


handleSuccessForBudgetPlanner(component , event , helper){
    console.log('Both Records saved');
}

Do i need the saveBothRecord to be on the handleSuccess instead? — JackDower, Aug 19 '19 at 9:45
handleSuccess is called after saving records, its just basic callback. You can do something like save 1st record, and its handleSuccess callback method save second record. — Pranay Jaiswal, Aug 19 '19 at 9:46
So I have adapted my code so both recordEditForms are inside tabs but when having just the handleSuccess and linking it all the with the saveBothRecord you suggested it will only ever save one record — JackDower, Aug 19 '19 at 10:00

JackDower · Accepted Answer · 2019-08-19 12:58:58Z

So after a bit of playing around off the back of @pranay's answer I have managed to get two records saving to two different objects.

The way I managed this was to save my secondary objects record during the onsuccess of the primary recordEditForm.

Here is my component :

<aura:component implements="force:hasRecordId,force:lightningQuickActionWithoutHeader,flexipage:availableForRecordHome,lightning:actionOverride" 
                access="global">

    <lightning:navigation aura:id="navService"/>

        <lightning:tabset selectedTabId="{!v.selTabId}" variant="vertical" class="slds-modal__content slds-p-around_x-small">
            <lightning:tab label="Objectives" id="Objective">
                <lightning:recordEditForm objectApiName="Factfind__c" aura:id="firstPage"
                                          onsubmit="{!c.submitFP}"
                                          onsuccess="{!c.handleSuccess}">



                    </table>
                </lightning:recordEditForm>

            </lightning:tab>

            <lightning:tab label="Budget Planner" id="BudgetPlan">
                <lightning:recordEditForm objectApiName="Budget_Planner__c" aura:id="budgetPlanner">
                </lightning:recordEditForm>

            </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}" onclick="{!c.submitFP}" label="Save" variant="brand" name="save"/>
                </div> 

</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();
    },



    submitFP : function(component, event, helper) {
        component.find("firstPage").submit();
        //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) {
        cmp.find("budgetPlanner").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"
            }
        });
    },


    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');     
        } 
    }


})

As you can see in my handleSuccess the first line submits the budget planner record then it redirects to the created factfind record just after.

In doing this I had to have a main submitFP which is what my button does onclick and this submits the whole factfind in order for the handleSuccess to run after this :)

Hope this makes sense for anyone else having issues with this.

Can you remove the unrelevant content and try to make it generic so that it can be used by someone else with similar issue? — Pranay Jaiswal, Aug 19 '19 at 12:53
I have removed all irrelevant content I can see anymore you think I should remove please let me know — JackDower, Aug 19 '19 at 13:00

Stack Exchange Network

current community

your communities

more stack exchange communities

How to save record from a different object using nested recordEditForm

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged lightning-aura-components lightning lightning-recordeditform nested or ask your own question.

Hot Network Questions

How to save record from a different object using nested recordEditForm

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged lightning-aura-components lightning lightning-recordeditform nested or ask your own question.

Related

Hot Network Questions