0

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

1

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

0

While lightning:datatable is the ideal way of solving your problem, it is worthwhile to mention SLDS here. Have you looked at this?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.