function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sksfdc221sksfdc221 

display child records with checkbox on lightning component

I have a requirement to display and select child records on a selected record detail page.
This Lightning component, will be used on Account record page and that Account record's related contact records will be displayed with checkbox to select on the page.

Can anyone please suggest the possible approach w.r.t my requirement above.
AnudeepAnudeep (Salesforce Developers) 
Apex Controller
 
public with sharing class LightningAccController 
{
    @AuraEnabled
    public static list<Contact> getRelatedList(Id recordId)
    {
        List<Contact> Conlist = [Select id, name,firstname,lastname from Contact where AccountId=: recordId];
        return Conlist;
    }
}

Lightning Component
 
<aura:component controller = "LightningAccController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
 <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="ContactList" type="Contact[]" />
    <aura:handler name="init" value="{!this}" action="{!c.myAction}" />
    <aura:iteration  items="{!v.ContactList}" var="con">
        Contact Name = {!con.Name} <br/>
        <ui:inputCheckbox aura:id="checkbox" 
                          text="{!con.BillingCity}"
                          name="{!indx}"
                          label="{!con.BillingCity}" 
                          change="{!c.selectoptionvalue}"/>
    </aura:iteration>
</aura:component>

Lighting Controller
 
({
 myAction : function(component, event, helper) 
    {
        var ConList = component.get("c.getRelatedList");
        ConList.setParams
        ({
            recordId: component.get("v.recordId")
        });
        
        ConList.setCallback(this, function(data) 
                           {
                               component.set("v.ContactList", data.getReturnValue());
                           });
        $A.enqueueAction(ConList);
 }, 

 selectoptionvalue: function(component, event, helper) {
  //logic to handle checkbox selection goes here
}
})

This is just a sample code. Please make changes as per your requirement

If you find this information helpful, please mark this answer as Best. It may help others in the community. Thank You!

Anudeep