Reusable Related List Component in Lightning using Apex class

 Apex class:

----------

public with sharing class RelatedListController {

    @AuraEnabled   

    public static RelatedListResult fetchRecs( String recId, String sObjName, String parentFldNam, String strCriteria ) {     

        String strTitle = ' (';           

        List < sObject > listsObjects = new List < sObject >();  

        RelatedListResult obj = new RelatedListResult();  

        String strSOQL = 'SELECT Id FROM ' + sObjName + ' WHERE ' + parentFldNam + ' = \'' + recid + '\'';

        if ( String.isNotBlank( strCriteria ) )  

            strSOQL += ' ' + strCriteria;   

        strSOQL += ' LIMIT 4';  

        listsObjects = Database.query( strSOQL );    

        Integer intCount = listsObjects.size();  

        if ( intCount > 3 ) {  

              

            List < sObject > tempListsObjects = new List < sObject >();  

            for ( Integer i = 0; i <3; i++ )  

                tempListsObjects.add( listsObjects.get( i ) );  

              

            obj.listsObject = tempListsObjects;  

            strTitle += '3+';  

              

        } else {  

              

            obj.listsObject = listsObjects;  

            strTitle += String.valueOf( intCount );  

              

        }  

        strTitle += ')';        

        obj.strTitle = strTitle;  

        return obj;  

          

    }  

      

    public class RelatedListResult {        

        @AuraEnabled  

        public String strTitle;  

        @AuraEnabled  

        public List < sObject > listsObject;  

          

    }  

}

RelatedList.cmp:

-------------------

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="RelatedListController" >  

      

    <aura:attribute name="relatedListURL" type="String"/>  

    <aura:attribute name="title" type="String"/>  

    <aura:attribute name="criteria" type="String"/>  

    <aura:attribute name="parentFieldName" type="String"/>  

    <aura:attribute name="sobjectName" type="String"/>  

    <aura:attribute name="ObjectName" type="String"/>  

    <aura:attribute name="childRelName" type="String"/>  

    <aura:attribute name="iconName" type="String"/>  

    <aura:attribute name="field1" type="String"/>  

    <aura:attribute name="field2" type="String"/>  

    <aura:attribute name="field3" type="String"/>  

    <aura:attribute name="field4" type="String"/>  

    <aura:attribute name="listRecords" type="sObject[]"/>  

      

    <aura:handler name="init" value="{!this}" action="{!c.fetchRecords}"/>  

      

    <lightning:card iconName="{!v.iconName}">  

          

        <aura:set attribute="title">  

              

            <aura:if isTrue="{!not(empty(v.listRecords))}">  

                  

                <lightning:button variant="base"   

                                  label="{!v.title}"   

                                  title="View All Action"   

                                  onclick="{! c.viewRelatedList }"/>  

                  

            </aura:if>  

              

        </aura:set>  

          

        <p class="slds-p-horizontal_small">  

              

            <aura:iteration items="{!v.listRecords}" var="item">  

                  

                <!--lightning:button variant="base"   

                                  label="{! 'View ' + v.ObjectName }"   

                                  title="View"   

                                  onclick="{! c.viewRecord }"  

                                  value="{!item.Id}"/-->  

                <lightning:recordViewForm recordId="{!item.Id}" objectApiName="{!v.sobjectName}">  

                      

                    <div class="slds-grid">  

                        <div class="slds-col slds-size_1-of-2">  

                            <lightning:outputField fieldName="{!v.field1}" />  

                        </div>  

                        <aura:if isTrue="{!v.field2 != null}">

                            <div class="slds-col slds-size_1-of-2">  

                                <lightning:outputField fieldName="{!v.field2}" />  

                            </div>  

                        </aura:if>

                    </div>  

                    <aura:if isTrue="{!v.field3 != null}">

                        <div class="slds-grid">  

                            <div class="slds-col slds-size_1-of-2">  

                                <lightning:outputField fieldName="{!v.field3}" />  

                            </div>

                            <div class="slds-col slds-size_1-of-2">  

                                <lightning:outputField fieldName="{!v.field4}" />  

                            </div>  

                        </div>  

                    </aura:if>

                              

                </lightning:recordViewForm><br/><br/>  

                  

            </aura:iteration>  

        </p>  

                  

        <aura:set attribute="footer">  

              

            <aura:if isTrue="{!not(empty(v.listRecords))}">  

                  

                <lightning:button variant="base"   

                                  label="View All"   

                                  title="View All Action"   

                                  onclick="{! c.viewRelatedList }"/>  

                  

            </aura:if>  

              

        </aura:set>  

          

    </lightning:card>  

      

</aura:component>

js controller:

-------------

({  

      

    fetchRecords : function(component, event, helper) {  

          

        var temObjName = component.get( "v.sobjectName" );  

        component.set( "v.ObjectName", temObjName.replace( "__c", "" ).replace( "_", " " ) );  

        var action = component.get( "c.fetchRecs" );  

        action.setParams({  

            recId: component.get( "v.recordId" ),  

            sObjName: temObjName,  

            parentFldNam: component.get( "v.parentFieldName" ),  

            strCriteria: component.get( "v.criteria" )  

        });  

        action.setCallback(this, function(response) {  

            var state = response.getState();  

            if ( state === "SUCCESS" ) {  

                  

                var tempTitle = component.get( "v.title" );  

                component.set( "v.listRecords", response.getReturnValue().listsObject );  

                component.set( "v.title", tempTitle + response.getReturnValue().strTitle );  

                  

            }  

        });  

        $A.enqueueAction(action);  

          

    },  

      

    viewRelatedList: function (component, event, helper) {  

          

        var navEvt = $A.get("e.force:navigateToRelatedList");  

        navEvt.setParams({  

            "relatedListId": component.get( "v.childRelName" ),  

            "parentRecordId": component.get( "v.recordId" )  

        });  

        navEvt.fire();  

    },  

      

    viewRecord: function (component, event, helper) {  

          

        var navEvt = $A.get("e.force:navigateToSObject");  

        var recId = event.getSource().get( "v.value" )  

        navEvt.setParams({  

            "recordId": recId  

        });  

        navEvt.fire();  

          

    }  

      

})

Docimentation:

------------

<aura:documentation>

<aura:description>Documentation</aura:description>

<aura:example name="ExampleName" ref="exampleComponentName" label="Label">

Example Description

</aura:example>

</aura:documentation>

design:

------

<design:component >

    <design:attribute name="title" label="Title" required="true"/>  

    <design:attribute name="parentFieldName" label="Parent Field API Name" required="true"/>  

    <design:attribute name="sobjectName" label="Object API Name" required="true"/>  

    <design:attribute name="criteria" label="Additonal Criteria"/>  

    <design:attribute name="childRelName" label="Child Relationship Name" required="true"/>  

    <design:attribute name="iconName" label="Icon Name" required="true"/>  

    <design:attribute name="field1" label="Field 1" required="true"/>  

    <design:attribute name="field2" label="Field 2" />  

    <design:attribute name="field3" label="Field 3" /> 

</design:component>

SVG:

----

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

<path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E" />

<path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF" />

</g>

</svg>