Add Multiple Child Records to Parent Object With Lightning Component

Hi guys,

Today, in this post we are create a simple salesforce lightning component to add multiple child object records to the Parent record using checkboxes. 

Prerequisites : basic understanding of Lightning Component. and Apex Programming.

For this post i take salesforce standard Account and Contact Object where as we know account is parent and contact is a child object of parent. or we can say that A single account has multiple contacts records.

After create this component we will add it to account record page layout to run it.

Lightning Component sample add multiple child object
After create this lightning component looks like :


Lightning Component sample add multiple child object
Demo: After add component to account record page layout
Apex Controller Class Code :


Lightning Component Code :


  • In the above lightning component, i have use 2 interface “flexipage:availableForRecordHome” and “force:hasRecordId” on line number 3.

so “flexipage:availableForRecordHome” interface used for make lightning component available for record pages. and Add the “force:hasRecordId”  interface to a Lightning component to enable the component to be assigned the ID of the currently displaying record.

force:hasRecordId” interface automatically adds an attribute named recordId to your component. This attribute is of type String, and its value is an 18-character Salesforce record ID, such as : 001xx000003DGSWAA4.

     The record ID is set only when you place the component on a lightning experience record page, or invoke it as an action from a record page.

  • See code comments.

JavaScript Controller Code :


  • See Code Comments.
javaScript Helper Code :


  • See Code Comments.

See Also : Delete Multiple Records Using Checkbox In Lightning Component

Add Lightning Component to Account [parent] Record Page Layout.

after create lightning component now time to run this component from record page layout.

From setup ==> go to object Manager ==> and select Account object [Parent].

Lightning Component sample add multiple child object

  • Next scroll and go to Lightning Record Pages section and click on Account Record Pages link. and click on the edit button.

Lightning Component sample add multiple child object

  • Next find and add your lightning component to record page layout and click on save button.

Lightning Component sample add multiple child object

If you don’t add “flexipage:availableForRecordHome” interface to your lightning component then your lightning component will be not available in Lightning app builder.

  • Now go back to account object and open any existing record to see the lightning component on record page layout.

Lightning Component sample add multiple child object

Related Resources :

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box. 🙂

(Visited 28,464 times, 1 visits today)

23 thoughts on “Add Multiple Child Records to Parent Object With Lightning Component”

  1. Hi,

    Nice blog.

    Quick Suggestion : It is bind only with account and contact object. As developing with Lightning Framework, try to create components dynamically.

    In your case use sObjects to further use between any Salesforce object.

  2. Nice One

    Questions:I have around more than 2000 record in contact object, at that time what i will do in this scenario.Is is possible one search button which will be help me to search record and add record .

  3. Great component.

    Have made the following modification:-

    public class addChildController {
    public static List<contact> getContacts() {
    List<contact> totalList = new List<contact>();
    for(Contact cc : [SELECT Id, Name, Email FROM Contact WHERE Id NOT IN (SELECT ContactId FROM AccountContactRelation WHERE AccountId = :ApexPages.currentPage().getParameters().get(‘Id’))]){
    return totalList;

    Just can’t seem to get AccountId filter to work properly. Any suggestion would be much appreciated.

  4. Hi there!

    Can I display this component on child record rather than parent? Do I need to update the code for that? I am new to Lightning Component 🙂

    Thanks for the great work!

    • Hey I also have same doubt. I want to do this in Child Object for Multiple Parent Object. If You did this then Can you share with me?

  5. here is my controller .when i insert only account is works properly.but when inset contact it gives error

    Upsert failed. First exception on row 0; first error: INVALID_FIELD_FOR_INSERT_UPDATE, Contact: bad field names on insert/update call: lastName: [lastName]

    please give me a suggession

    public with sharing class AccountController{

    public static Account saveAccount (Account acc,Contact con) {
    upsert acc;
    Contact newcontact = con;
    newcontact.accountid =;
    upsert newcontact;
    return acc;

  6. Great Work!!

    I have a query, what would be the solution if there is a junction object between two objects say account and Product__c, Many products can be added to a account and many accounts could have same product too.

    • Yes, I too have the same doubt. how to implement if we are creating junction object records to create relation between Contact and my custom Object. I’m using standard Lightning Datatable component to display records of custom object, then select multiple and link them to Contact Record.

  7. Hi,

    I am trying similar  functionality but facing an issue in fetching all the id’s. For me,

    var getAllId = component.find(“checkBox”);

    this returns just the checkbox id for 1st record.So I am not able to push anything if I select any other checkbox other than the 1st checkbox via
    if (getAllId[i].get(“v.value”) == true)

    I have followed same steps as give in the blog.Can you suggest anything on this how to fetch all the ids.
    Thanks in Advance!

  8. Hi

    I am trying to implement similar functionality but facing issue in fetching the “v.text” value for the selected checkbox. It is giving me undefined. Do you have any suggestion how this can be resolved.

    Thanks in Advance!

  9. In addChildController.apxc you go perform the database query, and then go through each item in the list, adding it to a new list without performing any processing on it.

    To be more efficient, rather than:

    You can simplify the code with:


    The code is simple and easy to read. Best of all, you save time as you don’t have to process each element of the list in order to copy it into another list. You’ve just returned the list given from the SOQL result.

  10. Hi Team,

    I need help for a lightning component.
    I implemented for creating a parent and child records at the same time.

    same like I need to do the edit button same like functionality using lightning component.

    I’m got only parent values children object records values not getting.

    in alert got it child values  I used

    <aura:iteration items=”{!v.statementDetails}” var=”item”>

    <c:statementDetail_Component selectedLookUpRecordAccount =”{!v.selectedLookUpRecordAccount}”
    editLineOfCoverage =”{!item.Line_of_Coverage__c}”
    editActualRevenue =”{!item.Actual_Revenue__c}”
    editActualPremium =”{!item.Actual_Premium__c}”
    editType =”{!item.Type__c}”
    editApplyTo =”{!item.Apply_To__c}”
    statementDetails= “{!v.statementDetails}”/>

    Please help on this urgent



  11. After Click Checkbox and Add a record to Parent That Selected record should hide from the child list.Please Help

  12. can we use lightning:inputfield instead ui:inputtext, please share source code . my goal is- want to use for lookupfield (Accounid- contact object)

  13. Hi,
    Want to display list of accounts and when click on account that related contacts should be show in below dynamically plz help .

    thank you in advance

  14. Hi, I’m trying to use the above logic but our requirement is little different.

    But I’m facing issue in the below line – tempIDs.push(getAllId[i].get(“v.text”);

    Here, if I change it to v.value, TRUE is returned. But v.text is not returning anything. And I need the text value to be added to the tempIDs array and as a result, tempIDs are also empty.

  15. Hi,

    My component works great, except when it’s only one record (Contact) displayed in the table. It seems that I can select it, but it doesn’t relate it to the Account. Any suggestion?


Leave a Comment