Reusable Related List Lightning Component with filter in Salesforce

Sample Code:

Apex Class:

1. public class RelatedListController {  
2.       
3.     @AuraEnabled  
4.     public static RelatedListResult fetchRecs( String recId, String sObjName, String parentFldNam, String strCriteria ) {  
5.           
6.         String strTitle = ' (';           
7.         List < sObject > listsObjects = new List < sObject >();  
8.         RelatedListResult obj = new RelatedListResult();  
9.         String strSOQL = 'SELECT Id FROM ' + sObjName + ' WHERE ' + parentFldNam + ' = \'' + recid + '\'';  
10.         if ( String.isNotBlank( strCriteria ) )  
11.             strSOQL += ' ' + strCriteria;  
12.         strSOQL += ' LIMIT 4';  
13.         listsObjects = Database.query( strSOQL );    
14.         Integer intCount = listsObjects.size();  
15.         if ( intCount > 3 ) {  
16.               
17.             List < sObject > tempListsObjects = new List < sObject >();  
18.             for ( Integer i = 0; i <3; i++ )  
19.                 tempListsObjects.add( listsObjects.get( i ) );  
20.               
21.             obj.listsObject = tempListsObjects;  
22.             strTitle += '3+';  
23.               
24.         } else {  
25.               
26.             obj.listsObject = listsObjects;  
27.             strTitle += String.valueOf( intCount );  
28.               
29.         }  
30.         strTitle += ')';        
31.         obj.strTitle = strTitle;  
32.         return obj;  
33.           
34.     }  
35.       
36.     public class RelatedListResult {  
37.           
38.         @AuraEnabled  
39.         public String strTitle;  
40.         @AuraEnabled  
41.         public List < sObject > listsObject;  
42.           
43.     }  
44.   
45. }  

Lightning Component:

1. <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="RelatedListController" >  
2.       
3.     <aura:attribute name="relatedListURL" type="String"/>  
4.     <aura:attribute name="title" type="String"/>  
5.     <aura:attribute name="criteria" type="String"/>  
6.     <aura:attribute name="parentFieldName" type="String"/>  
7.     <aura:attribute name="sobjectName" type="String"/>  
8.     <aura:attribute name="ObjectName" type="String"/>  
9.     <aura:attribute name="childRelName" type="String"/>  
10.     <aura:attribute name="iconName" type="String"/>  
11.     <aura:attribute name="field1" type="String"/>  
12.     <aura:attribute name="field2" type="String"/>  
13.     <aura:attribute name="field3" type="String"/>  
14.     <aura:attribute name="field4" type="String"/>  
15.     <aura:attribute name="listRecords" type="sObject[]"/>  
16.       
17.     <aura:handler name="init" value="{!this}" action="{!c.fetchRecords}"/>  
18.       
19.     <lightning:card iconName="{!v.iconName}">  
20.           
21.         <aura:set attribute="title">  
22.               
23.             <aura:if isTrue="{!not(empty(v.listRecords))}">  
24.                   
25.                 <lightning:button variant="base"   
26.                                   label="{!v.title}"   
27.                                   title="View All Action"   
28.                                   onclick="{! c.viewRelatedList }"/>  
29.                   
30.             </aura:if>  
31.               
32.         </aura:set>  
33.           
34.         <p class="slds-p-horizontal_small">  
35.               
36.             <aura:iteration items="{!v.listRecords}" var="item">  
37.                   
38.                 <lightning:button variant="base"   
39.                                   label="{! 'View ' + v.ObjectName }"   
40.                                   title="View"   
41.                                   onclick="{! c.viewRecord }"  
42.                                   value="{!item.Id}"/>  
43.                 <lightning:recordViewForm recordId="{!item.Id}" objectApiName="{!v.sobjectName}">  
44.                       
45.                     <div class="slds-grid">  
46.                         <div class="slds-col slds-size_1-of-2">  
47.                             <lightning:outputField fieldName="{!v.field1}" />  
48.                         </div>  
49.                         <div class="slds-col slds-size_1-of-2">  
50.                             <lightning:outputField fieldName="{!v.field2}" />  
51.                         </div>  
52.                     </div>  
53.                     <div class="slds-grid">  
54.                         <div class="slds-col slds-size_1-of-2">  
55.                             <lightning:outputField fieldName="{!v.field3}" />  
56.                         </div>  
57.                         <div class="slds-col slds-size_1-of-2">  
58.                             <lightning:outputField fieldName="{!v.field4}" />  
59.                         </div>  
60.                     </div>  
61.                               
62.                 </lightning:recordViewForm><br/><br/>  
63.                   
64.             </aura:iteration>  
65.         </p>  
66.                   
67.         <aura:set attribute="footer">  
68.               
69.             <aura:if isTrue="{!not(empty(v.listRecords))}">  
70.                   
71.                 <lightning:button variant="base"   
72.                                   label="View All"   
73.                                   title="View All Action"   
74.                                   onclick="{! c.viewRelatedList }"/>  
75.                   
76.             </aura:if>  
77.               
78.         </aura:set>  
79.           
80.     </lightning:card>  
81.       
82. </aura:component>  

Lightning Component Controller:

1. ({  
2.       
3.     fetchRecords : function(component, event, helper) {  
4.           
5.         var temObjName = component.get( "v.sobjectName" );  
6.         component.set( "v.ObjectName", temObjName.replace( "__c", "" ).replace( "_", " " ) );  
7.         var action = component.get( "c.fetchRecs" );  
8.         action.setParams({  
9.             recId: component.get( "v.recordId" ),  
10.             sObjName: temObjName,  
11.             parentFldNam: component.get( "v.parentFieldName" ),  
12.             strCriteria: component.get( "v.criteria" )  
13.         });  
14.         action.setCallback(this, function(response) {  
15.             var state = response.getState();  
16.             if ( state === "SUCCESS" ) {  
17.                   
18.                 var tempTitle = component.get( "v.title" );  
19.                 component.set( "v.listRecords", response.getReturnValue().listsObject );  
20.                 component.set( "v.title", tempTitle + response.getReturnValue().strTitle );  
21.                   
22.             }  
23.         });  
24.         $A.enqueueAction(action);  
25.           
26.     },  
27.       
28.     viewRelatedList: function (component, event, helper) {  
29.           
30.         var navEvt = $A.get("e.force:navigateToRelatedList");  
31.         navEvt.setParams({  
32.             "relatedListId": component.get( "v.childRelName" ),  
33.             "parentRecordId": component.get( "v.recordId" )  
34.         });  
35.         navEvt.fire();  
36.     },  
37.       
38.     viewRecord: function (component, event, helper) {  
39.           
40.         var navEvt = $A.get("e.force:navigateToSObject");  
41.         var recId = event.getSource().get( "v.value" )  
42.         navEvt.setParams({  
43.             "recordId": recId  
44.         });  
45.         navEvt.fire();  
46.           
47.     }  
48.       
49. })  

Lightning Component Design:

1. <design:component>  
2.       
3.     <design:attribute name="title" label="Title" required="true"/>  
4.     <design:attribute name="parentFieldName" label="Parent Field API Name" required="true"/>  
5.     <design:attribute name="sobjectName" label="Object API Name" required="true"/>  
6.     <design:attribute name="criteria" label="Additonal Criteria"/>  
7.     <design:attribute name="childRelName" label="Child Relationship Name" required="true"/>  
8.     <design:attribute name="iconName" label="Icon Name" required="true"/>  
9.     <design:attribute name="field1" label="Field 1" required="true"/>  
10.     <design:attribute name="field2" label="Field 2" required="true"/>  
11.     <design:attribute name="field3" label="Field 3" required="true"/>  
12.     <design:attribute name="field4" label="Field 4" required="true"/>  
13.       
14. </design:component>  

App Builder configuration:

Output: