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: 



No comments:

Post a Comment