Displaying Account Closed and Account Open Cases On Case Page Layout

Question

I created a new case layout and I would like to display the related account's related cases. I can currently show all the related account's cases but I would like to split that up into two related lists one for open cases and the other for closed cases. Is there a way to do this using the app builder? If not, what's the best way to do this? We're currently using Classic but trying to switch to Lightning so I would need this to work in both.

Answer 1

There is an elegant solution to filter related lists declaratively. It's written up in full by Doug Ayers, but to summarize, it goes like this.

• For each filtered category of Case you want to have, create a new lookup field on Case pointing to Account. Give each one an appropriate related list name, for example, Account_Closed__c, "Cases (Closed)".
• Build a Process on the Case object that runs whenever the record is edited. In the Process, create a criteria node for each filtered category, and set the proper criteria on the node.
• Add an action to each node to clear each of the filtered lookups other than its own, and copy the value of the native AccountId lookup to its own. So, for example, the criteria node for "Cases (Closed)" would have an action to clear the "Cases (Open)" lookup field, and populate the Account_Closed__c lookup with the value of the field AccountId.

Then, you can edit your Lightning record page in App Builder to include one or more Single Related List components and select the appropriate filtered related lists you just created.

Answer 2

Another solution would be to Build a Lightning component to display the related Cases. This obviously involves code and if you are not code saavy, @David Reed's Solution is Best.

The lightning components would be fairly easy to create (most of the bellow snippets are copy paste (and slightnly modified from the docs),

you would need an Apex class to fetch the Related Cases:

public with sharing class RelatedCases {
    @AuraEnabled
    public static List<Case> relatedCases(String accountId) {

        List<Case> accountCases = [SELECT id from Case where AccountId = :AccountId];
        return accountCases;
    }
}

I created 2 components, a wrapper that displays 2 tabs (one for Open and another for Closed cases): sfRelatedAccountCAses.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="RelatedCases">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:attribute name="recordId" type="String" />
<aura:attribute name="cases" type="List" />

<lightning:tabset selectedTabId="open">
    <lightning:tab label="Open Cases" id="open">
        <aura:iteration items="{!v.cases}" var="case">
            <c:sfRelatedAccountCaseRecords recordId="{!case.Id}" caseStatus="Open"/>
        </aura:iteration>
    </lightning:tab>
    <lightning:tab label="Closed Cases" id="closed">
        <aura:iteration items="{!v.cases}" var="case">
            <c:sfRelatedAccountCaseRecords recordId="{!case.Id}" caseStatus="Closed"/>
        </aura:iteration>
    </lightning:tab>
</lightning:tabset>
</aura:component>

the controller:

({
"doInit" : function(cmp) {
    // create a one-time use instance of the serverEcho action
    // in the server-side controller
    var action = cmp.get("c.relatedCases");
    action.setParams({ accountId : cmp.get("v.recordId") });
    console.log(cmp.get("v.recordId") )
    // Create a callback that is executed after 
    // the server-side action returns
    action.setCallback(this, function(response) {

        var state = response.getState();
        if (state === "SUCCESS") {
            // Alert the user with the value returned 
            // from the server
            cmp.set('v.cases', response.getReturnValue());
            // You would typically fire a event here to trigger 
            // client-side notification that the server-side 
            // action is complete
        }
        else if (state === "INCOMPLETE") {
            // do something
        }
        else if (state === "ERROR") {
            var errors = response.getError();
            if (errors) {
                if (errors[0] && errors[0].message) {
                    console.log("Error message: " + 
                             errors[0].message);
                }
            } else {
                console.log("Unknown error");
            }
        }
    });

    // optionally set storable, abortable, background flag here

    // A client-side action could cause multiple events, 
    // which could trigger other events and 
    // other server-side action calls.
    // $A.enqueueAction adds the server-side action to the queue.
    $A.enqueueAction(action);
}
})

sfRelatedAccountCaseRecords.cmp

<aura:component implements="force:hasRecordId" access="global">
<aura:attribute name="caseStatus" type="String"/>
<aura:attribute name="record" type="Object"/>
<aura:attribute name="simpleRecord" type="Object"/>
<aura:attribute name="recordError" type="String"/>
<force:recordData aura:id="recordLoader"
  recordId="{!v.recordId}"
  layoutType="COMPACT"
  targetRecord="{!v.record}"
  targetFields="{!v.simpleRecord}"
  targetError="{!v.recordError}"  />

<aura:if isTrue="{! equals(v.caseStatus,'Open')}">
    <aura:renderIf  isTrue="{! notequals(v.simpleRecord.Status,'Closed') }">
        <div class="slds-page-header" role="banner">
            <p class="slds-text-heading--label">{!v.simpleRecord.Subject}</p>
            <h1 class="slds-page-header__title slds-m-right--small  slds-truncate slds-align-left"><a href="{! $Site.siteUrlPrefix + '/detail/' + v.simpleRecord.Id}">Go to Case details</a></h1>
        </div>
    </aura:renderIf >

    <aura:set attribute="else">
        <aura:renderIf  isTrue="{! equals(v.simpleRecord.Status,'Closed') }">
            <div class="slds-page-header" role="banner">
                <p class="slds-text-heading--label">{!v.simpleRecord.Subject}</p>
                <h1 class="slds-page-header__title slds-m-right--small  slds-truncate slds-align-left"><a href="{! $Site.siteUrlPrefix + '/detail/' + v.simpleRecord.Id}">Go to Case details</a></h1>
            </div>
        </aura:renderIf >
    </aura:set>
</aura:if>

<!-- Display Lightning Data Service errors, if any -->
<aura:if isTrue="{!not(empty(v.recordError))}">
  <div class="recordError">
    <ui:message title="Error" severity="error" closable="true">
      {!v.recordError}
    </ui:message>
  </div>
</aura:if>
</aura:component>

few note(s):

• The anchor tag currently does not generate an LEX link, and should be replaced by lighting events for navigation.
• The Apex class does no validation whatsoever, should be added, and will require a Test Class (fairly simple)
• I would add lightning:layout and layoutItems in the markup, alongside any additional fields you might need to display to the end user.

Sample View: (any other remarks are welcome)