+ Start a Discussion
Chelsea LukowskiChelsea Lukowski 

Lightning component list of related record with list of files for case

I am trying to create a lightning componet for my Warranty Claim Case layout. On the case layout, I want to show a card of each record from a related object(Warranty_Claim_Line_Item__c) with a preview of the files attached to each of those records. I have the component setup to show the cards but the images are repeating for each record. I just need some advise on how to get only the images associated to each Warranty_Claim_Line_Item__c on the corresponding card. Below is my code. 
 
<aura:component implements="flexipage:availableForRecordHome,force:appHostable,lightning:actionOverride,force:hasRecordId" controller="warrantyLineItemRecordsCtrl">
   <aura:attribute name="lineItems" type="Warranty_Claim_Line_Item__c[]"/>
    <aura:attribute name="recordId" type="Id"/>  
    <aura:attribute name="filesIds" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.loadLineItems}"/>
    <aura:iteration items="{!v.lineItems}" var="l" indexVar="key">
        <lightning:card title="{!l.Name}">
            <aura:set attribute="actions">
                <lightning:button label="Edit" onclick="{!c.edit}" name="{!l.Id}"/>
            </aura:set>
            
            <div class="slds-grid slds-p-left_medium">
                    <div class="slds-col slds-size_4-of-12">
                        <h4 class="slds-text-heading_small">Tire Description</h4>
                        <p><strong>Product Description</strong>:</p><p> {!l.Product__r.Name}</p>
                        <p><strong>Product Weight</strong>:<br/> {!l.Product_Weight__c} LBS</p>
                        <p><strong>Application Use</strong>: {!l.Application__c}</p>
                        <p><strong>Serial Number</strong>: {!l.Serial__c}</p>
                        <p><strong>Manufacturer Date</strong>: {!l.Manufacturer_Date__c}</p>
                        <p><strong>Removed Serial</strong>:</p>
                        <div class="row">
                        </div>
                    </div>
                    <div class="slds-col slds-size_4-of-12">
                        <h4 class="slds-text-heading_small">Purchasing Information</h4>
                        <p><strong>How You Got Your Tire</strong>: {!l.Original_Purchase__c}</p>
                        <p><strong>Purchase Date</strong>: {!l.Purchase_Date__c}</p>
                        <p><strong>Purchased New/Used</strong>:{!l.Purchased_New_or_Used__c}</p>
                        <p><strong>Selling Dealer</strong>: {!l.Selling_Partner_Account_Name__c}</p>
                        
                        <h4 class="slds-text-heading_small">Original Equipment Information</h4>
                        <p><strong>Make</strong>: {!l.Machine_Make__c}</p>
                        <p><strong>Model</strong>: {!l.Machine_Model__c}</p>
                        <p><strong>Year</strong>: {!l.Machine_Year__c}</p>
                        <p><strong>Equipment Hours</strong>: {!l.Machine_Hours__c}</p>
                        <p><strong>Equipment Serial Number</strong>: {!l.Machine_Serial_Number__c}</p> 
                        
                        <h4 class="slds-text-heading_small">Proof of Purchase</h4>
                        <div class="row"></div>
                        <h4 class="slds-text-heading_small">Service and Labor Costs</h4>
                        <p>{!l.Service_and_Labor_Cost__c}</p>                
                    </div>
                    <div  class="slds-col slds-size_4-of-12">
                        <h4 class="slds-text-heading_small">Issue with Tire</h4>
                        <p><strong>Defect Location</strong>: {!l.Defect_Location__c}</p>
                        <p><strong>Defect Type</strong>: {!l.Defect_Type__c}</p>
                        <p><strong>Tire Position</strong>: {!l.Tire_Position__c}</p>
                        <h4 class="slds-text-heading_small">Inspection Condition</h4>
                        <p><strong>Tire Hours</strong>: {!l.Tire_Hours__c}</p>
                        <p><strong>Tread Depth</strong>: {!l.Tread_Depth__c}</p>
                        <p><strong>Inflation</strong>: {!l.Tire_Inflation__c}</p>
                        <p><strong>Additional Comments</strong>: {!l.Issue_Additional_Comments__c}</p>
                        <h4 class="slds-text-heading_small">Evidence of Condition</h4>
                        <div>                            
                            <aura:iteration items="{!v.fileIds}" var="t">
                                <lightning:fileCard fileId="{!t.ContentDocumentId}" description="{!t.ContentDocument.title}"/>
                            </aura:iteration>
                        </div>
                        <h4 class="slds-text-heading_small">Proof of Stubble Stomper Purchase</h4>
                        <div class="row"></div>
                    </div>
                </div>
        </lightning:card>
    </aura:iteration>
    
</aura:component>
 
({
    loadLineItems : function(component, event, helper) {
        var action = component.get("c.getLineItems");
        action.setParams({
            MasterRecordId: component.get("v.recordId")
        });
        action.setCallback(this, function(response){
            if(response.getState()==="SUCCESS" && component.isValid()){
                component.set("v.lineItems",response.getReturnValue());
                console.log(JSON.parse(JSON.stringify(response.getReturnValue())));
            }
        });getWarrantyWithContent
        
        $A.enqueueAction(action);
        
        
        var action = component.get("c.fetchFiles");
        action.setParams({
            MasterRecordId : component.get("v.recordId")            
        });
        action.setCallback(this,function(response){
            var state = response.getState();
            if(state == "SUCCESS"){
                var result = response.getReturnValue()
                component.set("v.filesIds",result);
                console.log(result);
            }
        });	
        $A.enqueueAction(action); 
    }, 
    
     edit : function(component, event, helper) {
       var editRecordEvent = $A.get("e.force:editRecord");
         var recordId = event.getSource().get("v.name");
         
         console.log("record id: " + recordId);
        editRecordEvent.setParams({
            "recordId": recordId
        });
        editRecordEvent.fire();
    
    }
    
})
 
@AuraEnabled
    public static List<ContentDocumentLink> fetchFiles(String MasterRecordId){
        System.debug('MasterRecordId - - - - - - ' + MasterRecordId);
        return  [SELECT ContentDocumentId,ContentDocument.title,ContentDocument.LatestPublishedVersion.Warranty_Type__c 
                 FROM ContentDocumentLink 
                 WHERE ContentDocument.LatestPublishedVersion.Warranty_Type__c = 'Evidence' 
                 AND  LinkedEntityId IN (Select Id FROM Warranty_Claim_Line_Item__c WHERE Warranty_Case__c =: MasterRecordId)];        
    }

 
Best Answer chosen by Chelsea Lukowski
Nayana KNayana K
You can actually restructure your code in optimized way using wrapper class. But as a quick fix,please give this a try.
Select LinkedEntityId in the query
@AuraEnabled
    public static List<ContentDocumentLink> fetchFiles(String MasterRecordId){
        System.debug('MasterRecordId - - - - - - ' + MasterRecordId);
        return  [SELECT ContentDocumentId,ContentDocument.title,ContentDocument.LatestPublishedVersion.Warranty_Type__c,LinkedEntityId 
                 FROM ContentDocumentLink 
                 WHERE ContentDocument.LatestPublishedVersion.Warranty_Type__c = 'Evidence' 
                 AND  LinkedEntityId IN (Select Id FROM Warranty_Claim_Line_Item__c WHERE Warranty_Case__c =: MasterRecordId)];        
    }


change inner files aura iteration to match against line item id of the outer line item iteration
<aura:iteration items="{!v.fileIds}" var="t">
<aura:if isTrue="{!t.LinkedEntityId == l.Id>
                                <lightning:fileCard fileId="{!t.ContentDocumentId}" description="{!t.ContentDocument.title}"/>
</aura:if>
                            </aura:iteration>



 

All Answers

Nayana KNayana K
You can actually restructure your code in optimized way using wrapper class. But as a quick fix,please give this a try.
Select LinkedEntityId in the query
@AuraEnabled
    public static List<ContentDocumentLink> fetchFiles(String MasterRecordId){
        System.debug('MasterRecordId - - - - - - ' + MasterRecordId);
        return  [SELECT ContentDocumentId,ContentDocument.title,ContentDocument.LatestPublishedVersion.Warranty_Type__c,LinkedEntityId 
                 FROM ContentDocumentLink 
                 WHERE ContentDocument.LatestPublishedVersion.Warranty_Type__c = 'Evidence' 
                 AND  LinkedEntityId IN (Select Id FROM Warranty_Claim_Line_Item__c WHERE Warranty_Case__c =: MasterRecordId)];        
    }


change inner files aura iteration to match against line item id of the outer line item iteration
<aura:iteration items="{!v.fileIds}" var="t">
<aura:if isTrue="{!t.LinkedEntityId == l.Id>
                                <lightning:fileCard fileId="{!t.ContentDocumentId}" description="{!t.ContentDocument.title}"/>
</aura:if>
                            </aura:iteration>



 
This was selected as the best answer
Chelsea LukowskiChelsea Lukowski
Thank you! The aura:if statements did not work so I ended up going the wrapper class route and the component is working perfectly.