+ Start a Discussion
Tyler ZikaTyler Zika 

Display Master/Detail custom object records in Lightning.

I currently have a Lightning that displays a list of custom Master object records. 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="ListWhiteboardItemsApexController">
    
    <aura:attribute name="whiteboardItems" type="Whiteboard_Item__c[]"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        
    <aura:iteration items="{!v.whiteboardItems}" var="whiteboardItem">  
            <c:whiteboardItem whiteboardItem="{!whiteboardItem}" "/>
    </aura:iteration>
    
   
    
</aura:component>

Each master record has many detail records attached to it. Would I need to do a database call for all the detail records? How do I reference them in my code?

Here was was the relationship looks like in the schema
User-added image
Tyler ZikaTyler Zika
Let me add, I want to display ALL of the detail records that belong to each Master record, under each Master record.
VineetzVineetz
Same problem. Please let me know how you sorted this.
Tyler ZikaTyler Zika
Hi Vineetz! I figured it out. You need to create component that is specifically for your detail object. It takes an attribute that is the master items ID. Place this component inside the master item component.
<c:ListDetailItems masterItemId="{!v.masterItem.Id}"/>
Pass the detailItem List and masterItemId into the c:detailItem to be iterated over.
//c:ListDetailItems 

<aura:component controller="ListWBItemsActivitiesApexController">
    <aura:attribute name="masterItemId" type="String"/>
    <aura:attribute name="detailItems" type="detail[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    

    <aura:iteration items="{!v.detailItems}" var="detailItem"> 
    <c:detailItem detailItem="{!detailItem}" masterItemId="{!v.masterItemId}"/>
    </aura:iteration>
</aura:component>
You then create a getSubItems function that executes in the doIt. Since you now have the master item Id, you can use that in your function call on the client and the server.
 
//client controller for c:ListDetailITems
getDetailItems : function(component) {
		var action = component.get("c.getDetailItemsDB");
   		var masterItemId = component.get('v.masterItemId');
    	action.setParams({ "masterItemId" : masterItemId});
    	action.setCallback(this, function(response) {
        var state = response.getState();
        if(component.isValid() && state == "SUCCESS") {
            component.set("v.detailItems", response.getReturnValue());
        }
    });
    $A.enqueueAction(action);
},
 
//Apex server controller

public with sharing class ListDetailItemsApexController {
    @AuraEnabled
    public static List<detailItem> getDetailItemsDB(String masterItemId) {
        return [SELECT Id, IsDeleted, Name, 

                 //other fields for your SOQL
                FROM detailItem
				WHERE masterItem =: masterItemId];
    }
}

Let me know if you have any questions! 
Ahmed AbdelhamedAhmed Abdelhamed
please can you post the <c:detailItem  Component?