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: 



4 comments:

  1. /Navigatetorelated list is not working on ViewAll.Can you pllease help

    ReplyDelete
  2. Not working for creating event related list.I had made relationship between contact and Event, Contact is parent ,event is child, how can i display event child records of contact in contact related list

    ReplyDelete
    Replies
    1. In this case, use standard Related List - Single component instead of this custom component.

      Delete