You need to sign in to do that
Don't have an account?

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

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

Currently my lightning component is looking like this
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
<article class="slds-card">
<div class="slds-box slds-box_xx-small" style="padding:1Rem;">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-case" title="Related Case">
<lightning:icon iconName="standard:case" size="small" alternativeText="sss"/>
<span class="slds-assistive-text">Related case</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Related case">
<span class="slds-text-heading_small">Related case</span>
</a>
</h2>
</div>
</header>
</div>
</div>
<div class="slds-box slds-box_xx-small" style="padding:1Rem;">
<table class="slds-table slds-table_fixed-layout slds-table_bordered slds-no-row-hover slds-table_cell-buffer">
<div class="slds-card__body slds-card__body_inner">
<span class="slds-section__title">Case Number</span>
</div>
</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">
<footer class="slds-card__footer">
<a class="slds-card__footer-action" href="javascript:void(0);">View All
<span class="slds-assistive-text">Related case</span>
</a>
</footer>
</div>
</article>