Lightning Component sample Multiple Child Records

Add Multiple Child Records to Parent Object With Lightning Component

Lightning Component

Sharing is caring!

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 :

addChildController.apxc

Lightning Component Code :

addChild.cmp

  • 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 :

addChildController.js

  • See Code Comments.
javaScript Helper Code :

addChildHelper.js

  • 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. 🙂

Sharing is caring!

(Visited 6,198 times, 31 visits today)

7 comments

  • 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.

  • 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 .

  • Great component.

    Have made the following modification:-

    public class addChildController {
    @AuraEnabled
    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’))]){
    totalList.add(cc);
    }
    return totalList;
    }

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

  • 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!

Leave a Reply