4

I am trying to show a list of cases related to an account in a table view. I am using Lightning Design System to show a table and iterate through a list of cases. Is there a way to sort this table dynamically without having to perform another query and re-render the component?

It seems the FilterList component is only available in AppBuilder and this will ultimately be displayed via VisualForce through Salesforce Communities so this doesn't work for me.

Here is my CasesList Component:

<aura:component controller="CasesController">
<aura:attribute name="cases" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<!-- Lightning Design Card -->
<div class="slds">
<div class="slds-card slds-m-right--small">
    <div class="slds-card__header slds-grid">
        <div class="slds-media slds-media--center slds-has-flexi-truncate">
            <div class="slds-media__figure">
                <c:svg ariaHidden="true" 
                       xlinkHref="/resource/SLDS103/assets/icons/standard-sprite/svg/symbols.svg#case" 
                       class="slds-icon slds-icon-standard-case slds-icon--small" 
                />
            </div>
            <div class="slds-media__body">
                <h2 class="slds-text-heading--small slds-truncate">Cases</h2>
            </div>
        </div>
        <div class="slds-no-flex">
                <c:button class="slds-button--icon-border-filled"
                      svgXlinkHref="/resource/SLDS103/assets/icons/utility-sprite/svg/symbols.svg#chart"
                      svgClass="slds-button__icon"
                      onclick="{!c.showCharts}"
                      />
        </div>
        <div class="slds-no-flex">
            <div class="slds-button-group">
                <button class="slds-button slds-button--neutral slds-button--medium slds-m-right--medium" 
                        onclick="{!c.showDetails}" 
                        data-data="">Export
                </button>               
            </div>
        </div>
        <div class="slds-no-flex">
            <div class="slds-button-group">
                <button class="slds-button slds-button--brand slds-button--medium" 
                        onclick="{!c.showNewCase}" 
                        data-data="">New
                </button>               
            </div>
        </div>
    </div>
    <div class="slds-card__body slds-scrollable--y custom-card">
        <table class="slds-table slds-table--bordered slds-table--striped slds-max-medium-table--stacked-horizontal">
            <thead>
                <tr>
                    <th class="slds-is-sortable" scope="col">
                        <div class="slds-truncate">Case
                            <button class="slds-button slds-button--icon-bare">
                                <c:svg ariaHidden="true" 
                                       xlinkHref="/resource/SLDS103/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" 
                                       class="slds-button__icon slds-button__icon--small" 
                                       /> 
                                <span class="slds-assistive-text">Sort</span>
                            </button>
                        </div>
                    </th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Account Name</span></th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Priority</span></th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Status</span></th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Subject</span></th>  
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.cases}" var="case">
                    <tr>
                        <td><a href="#" onclick="{!c.showDetails}" data-data="{!case.Id}">{!case.CaseNumber}</a></td>
                        <td>{!case.Account.Name}</td>                 
                        <td>{!case.Priority}</td>
                        <td>{!case.Status}</td>
                        <td>{!case.Subject}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</div>
</aura:component>
  • 1
    The sorting functionality for the custom components has to custom built . You can use events to capture the sorted column click and rearrange the array in the Javascript controller if you want to provide sorting functionality client side . – Mohith Shrivastava May 25 '16 at 21:18
  • @MohithShrivastava do you have any example on how to sort it in the javascript controller? – cartman Nov 17 '16 at 18:31
1

Question: Are you using the new Community Templates? Spring16+ ?

If so, I'm curious what the need for a custom component is - You can connect the case object to the community - and using standard salesforce. On the Account related list for cases you can sort on any column and it will carry over to the community.

Let me know which version you are using.... Best, Kev

| improve this answer | |
  • No, unfortunately we cannot due to limitations with Community Builder theming. We have a complex scenario so we are using custom built communities based on visualforce pages. Thanks! – bobLablaw May 26 '16 at 13:35

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.