0

I've created the AccountList component from Trailhead below to display a table of data. However, I modified mine slightly to display case data.

https://trailhead.salesforce.com/en/projects/slds-lightning-components-workshop/steps/slds-lc-4#

I'm trying to add the in-context search bar to the component which will allow users to search by case number, subject, etc.

enter image description here

https://www.lightningdesignsystem.com/guidelines/search/in-context/

Does anyone know how to achieve this?

  • please share your code so we can see and help you – Itai Shmida Jun 3 '18 at 6:52
0

I was able to figure out how to add the search box. I will share my code here for others. However, one thing I could not figure out is 1) How to hyperlink the case number to the record 2) How to add pagination. If anyone knows how to do this it would be greatly appreciated!

CASE LIST

apex

public class CaseController {
@AuraEnabled
public static List<Case> getCases() {
return [SELECT Id, CaseNumber, Subject, Instance_Name__c , Status, Priority, 
CreatedDate FROM Case ORDER BY createdDate ASC];
}
@AuraEnabled
public static List<Case> findByName(String searchKey, Case[] caseList) {
Set<Id> recordIds = new Map<Id, Case>(getCases()).keySet();
system.debug('CASE LIST' + caseList);
String name = '%' + searchKey + '%';
return [SELECT Id, CaseNumber, Subject, Instance_Name__c  , Status, Priority, 
CreatedDate FROM Case WHERE (CaseNumber LIKE :name OR Subject LIKE :name OR 
Instance_Name__c LIKE :name OR Status LIKE :name) AND Id IN:recordIds LIMIT 
50];
}
}

Component

<aura:component controller="CaseController" 
implements="forceCommunity:availableForAllPageTypes" access="global">
<aura:handler event="c:SearchKeyChange" action="{!c.searchKeyChange}"/>
<aura:attribute name="cases" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="c:SearchKeyChange" action="{!c.searchKeyChange}"/>


<ltng:require styles="/resource/slds_resource/assets/styles/salesforce- 
lightning-design-system.css?v=1" />
<div class="slds">
<div class="slds-page-header noborderbottom" role="banner"> 
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <p class="slds-text-heading--label" style="padding-bottom: 4px;">Case 
Items</p>
      <div class="slds-grid">
        <div class="slds-grid slds-type-focus slds-no-space">
          <h1 class="slds-page-header__title slds-truncate" title="My Items" 
style="font-family: 'Salesforce Sans',Arial,sans-serif; font-weight: 300; 
padding-bottom: 5px;">My Cases</h1>
        </div>
      </div>
    </div>
  </div>
<!--
Search box
-->    
<div class="slds-grid">
<div class="slds-col slds-align-bottom" style="margin-top:10px">
     <c:SearchBarCmp />
</div>
 </div>       
    </div>   
 </div>      
<!--
Use a data table from the Lightning Design System:
https://www.lightningdesignsystem.com/components/data-tables/
-->
<table class="slds-table slds-table--bordered slds-table--striped slds-table- 
-cell-buffer slds-table--fixed-layout">
<thead>
  <tr class="slds-text-heading--label">          
    <th scope="col"><div class="slds-truncate" title="Case Number">Case 
Number</div></th>
    <th scope="col"><div class="slds-truncate" title="Subject">Subject</div> 
</th>
    <th scope="col"><div class="slds-truncate" title="Subject">Instance</div> 
</th>  
    <th scope="col"><div class="slds-truncate" title="Status">Status</div> 
</th>
    <th scope="col"><div class="slds-truncate" 
title="Priority">Priority</div></th>
    <th scope="col"><div class="slds-truncate" title="Created Date">Created 
Date</div></th>
  </tr>
</thead>
<tbody>
  <!-- Use the Apex model and controller to fetch server side data -->
  <aura:iteration items="{!v.cases}" var="case">
    <tr>
      <td><div class="slds-truncate" title="{!case.CaseNumber}"> 
{!case.CaseNumber}</div></td>
      <td><div class="slds-truncate" title="{!case.Subject}">{!case.Subject} 
</div></td>
      <td><div class="slds-truncate" title="{!case.Instance_Name__c}"> 
{!case.Instance_Name__c}</div></td>
      <td><div class="slds-truncate" title="{!case.Status}">{!case.Status} 
</div></td>
      <td><div class="slds-truncate" title="{!case.Priority}"> 
{!case.Priority}</div></td>
      <td><div class="slds-truncate" title="{!case.CreatedDate}"> 
{!case.CreatedDate}</div></td>
    </tr>
  </aura:iteration>
</tbody>
</table>
</aura:component>

Controller

({
doInit: function(component, event, helper) {      
// Fetch the account list from the Apex controller   
helper.getCaseList(component);
//alert('Test.');
 },
 searchKeyChange : function(component, event, helper){
 helper.findByName(component,event); 
}
})

Helper

({
 // Fetch the accounts from the Apex controller    
getCaseList: function(component) {
var action = component.get('c.getCases');
// Set up the callback
var self = this;
action.setCallback(this, function(actionResult) {
 component.set('v.cases', actionResult.getReturnValue());
});
$A.enqueueAction(action);
},
findByName: function(component,event) {  
var searchKey = event.getParam("searchKey");
var caseList = component.get("v.cases");
var action = component.get("c.findByName");
action.setParams({
  "searchKey": searchKey,
  "caseList" : caseList
}); 
action.setCallback(this, function(a) {
    component.set("v.cases", a.getReturnValue());
    component.set("v.casesLength", a.getReturnValue().length); 
});
$A.enqueueAction(action);  
}
})

SEARCH BOX

Event

<aura:event type="APPLICATION">
<aura:attribute name="searchKey" type="String"/>
</aura:event>

Component

<aura:component >
<input type="text" class="form-control" onchange="{!c.searchKeyChange}"
        placeholder="Search"/>
</aura:component>

Controller

({
searchKeyChange: function(component, event, helper) {
    var myEvent = $A.get("e.c:SearchKeyChange");
    myEvent.setParams({"searchKey": event.target.value});
    myEvent.fire();
 }
 })

Helper

({
helperMethod : function() {

}
})

Style

.THIS {
width: 100%;
padding: 8px;
}

.THIS input {
width: 100%;
padding: 8px;
-webkit-appearance: none;
border: solid 1px #dddddd;
}

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.