You need to sign in to do that
Don't have an account?
Chelsea 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)]; }
Select LinkedEntityId in the query
change inner files aura iteration to match against line item id of the outer line item iteration
All Answers
Select LinkedEntityId in the query
change inner files aura iteration to match against line item id of the outer line item iteration