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.

up vote 2 down vote accepted

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.

  • im wondering if a lightning component would be easier (obviously it depends of the coding skills of the OP) – glls Oct 15 at 13:59
  • It's really situation-dependent, I think. Lighting component would be a good solution given the coding skills. Given the asker's mention of App Builder and need for Lightning + Classic, I thought the declarative way might suit the bill so the native UI can be used. – David Reed Oct 15 at 14:02
  • @DavidReed - I have this somewhat working with a few issues. 1. Let's say I have an account with an open case and a closed case. On the account, I can see both the Account Open Case and Account Closed Case. On the case layout, I'm only able see Open cases if the case is open and closed cases if the case is closed. 2. In order for the related cases to show it's forcing me to add the lookups to the case details section. 3. I have those lookup fields set to read only in both Field Accessibility and the layout and they're still editable is there another place to set them as read only? – Laura Bejjani Oct 22 at 10:45
  • @LauraBejjani I don't really follow point (1) or (2). You may need to open a separate follow-up question. re (3), If you are a System Administrator, you have permission to edit read-only fields. – David Reed Oct 22 at 13:31
  • @David Reed - In Doug's example, he's displaying active and inactive contacts on the account layout page. What I'm trying to do is similar but I'm trying to display, on the Case layout, the related account open and closed cases. Following his example, it would be like trying to show the account's active and inactive contacts on the contact layout. For example Joe shmoe works for ABC Company and he's an active contact. When we're on his record, I want to be able to show all the active and all the inactive (in separate lists) – Laura Bejjani Oct 23 at 17:52

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: enter image description here (any other remarks are welcome)

  • This looks great. I can't wait to try it. Will this work in Classic? I wrote a custom highlight component which for some reason doesn't display in classic so I want to make sure it will work in both. – Laura Bejjani Oct 16 at 11:36
  • You can surely embed it in a visualforce page, however, the redirection links will need extra logic to handle that – glls Oct 16 at 11:42

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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