[SalesForce] How to make a lightning component to have a look and feel like a single related list

My requirement is to show all the cases related to parent object 'MTO' on case except the one case which is open .Ex there are 5 cases on MTO if I open 1 case then I should see other 4 cases on case related list. I have created lightning component .But the look and feel is not like related list .
Currently my lightning component is looking like this .
enter image description here

also the view all button is not clickable .How can I show sandard view all button functionality?
But I want it to be look like this
enter image description here
This is my lightning component design

Related case

Related case

Case Number

    </table>
   <!--  <div class="slds-box slds-box_xx-small" style="padding:1Rem;">-->
<aura:iteration items="{!v.CaseRelatedList}" var="case">
                    <tr>
                        <a href="{!'https://.force.com/lightning/r/Case/'+ case.Id + '/view?0.source=alohaHeader'}" target="_blank">{!case.CaseNumber}
                        </a>

                       </tr>
                </aura:iteration>
<!--</div>-->
</div>
<div class="slds-box slds-box_xx-small">

View All
Related case

Best Answer

There are actually a lot of ways how to achieve what you want but I'll point you to one that is I think easiest to do.

You can use lightning:datatable base component.

So basically copy pasting example from documentation:

Component

<aura:component controller="CaseController">
<!-- attributes -->
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>

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


<!-- the container element determine the height of the datatable -->
<div style="height: 300px">
    <lightning:datatable
            keyField="id"
            data="{! v.data }"
            columns="{! v.columns }"
            hideCheckboxColumn="true"/>
</div>

Controller

({
init: function (cmp, event, helper) {
    cmp.set('v.columns', [
        {label: 'Case name', fieldName: 'Name', type: 'text'}
        {label: 'Deadline', fieldName: 'closeDate', type: 'date'}
    ]);



    helper.fetchData(cmp);
}}

Helper

({
fetchData: function (cmp) {
            var action = component.get("c.getCases");
    action.setParams({
        "recordLimit": 10
    });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS" ) {
            var resultData = response.getReturnValue();
            component.set("v.data", resultData);
        }
    });
    $A.enqueueAction(action);
}
})

Apex method

@AuraEnabled
public static List<Case> getCases(Integer recordLimit) {
    Integer limit = Integer.ValueOf(recordLimit);
    List<Case> cases = [SELECT required Cases here LIMIT limit];
     return cases;
 }

That way you will receive Cases that you want in datatable form. Please be advised that fieldNames in columns must match cases fields. If you want to use other names you need to create wrapper for it.

About view all button. You can for example on button click fetch all of the cases and not only 10. Or navigate to a specific list view using lightning:navigation and page reference. There is also many ways and you didnt specify what you want to do.

References: https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example https://developer.salesforce.com/docs/component-library/bundle/lightning:navigation/documentation

Related Topic