I have a lightning component that displays a text box and a search button. On entering a string in the text box, system checks if the string is present in the text__c field of Case object & returns the matching Case record. When i make another search with different string, the component refreshes and matching Case record is returned. However, i want to display the search result in addition to the previous search result. For eg: if my previous search returned 4 Cases, and my new search returns 5 Cases, I want to display all 9 Accounts. Any idea how can I achieve this?
Please find the code below:
searchCaseController.apxc-
public with sharing class searchCaseController {
@AuraEnabled
public static List < case > fetchCase(String searchKeyWord, Id recId) {
List < case > returnList = new List < case > ();
List < case > lstOfCase =[Select AccountId,CaseNumber,CreatedDate,text__c from case where text__c LIKE: searchKeyWord and AccountId=:recId];
for (Case acc: lstOfCase) {
returnList.add(acc);
}
return returnList;
}
}
component-
<aura:component controller="searchCaseController" implements="force:hasRecordId,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<!-- CREATE ATTRIBUTE/VARIABLE-->
<aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
<aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>
<aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
<aura:attribute name="TotalNumberOfRecord" type="integer" default="0" description="use for display Number of records"/>
<!-- SHOW LOADING SPINNER-->
<lightning:spinner variant="brand" size="large" aura:id="Id_spinner" class="slds-hide" />
<div class="slds-m-around_medium">
<!-- SEARCH INPUT AND SEARCH BUTTON-->
<lightning:layout>
<lightning:layoutItem size="3" padding="around-small">
<!-- <lightning:input value="{!v.searchKeyword}" -->
<lightning:input value="{!v.searchKeyword}"
required="true"
placeholder="search cases...."
aura:id="searchField"
label="Account Name"/>
</lightning:layoutItem>
<lightning:layoutItem size="2" padding="around-small">
<lightning:button onclick="{!c.Search}"
variant="brand"
label="Search"
iconName="utility:search"/>
</lightning:layoutItem>
</lightning:layout>
<!-- TOTAL RECORDS BADGES-->
<div class="slds-m-around_x-small">
<lightning:badge label="{!v.TotalNumberOfRecord}" />
</div>
<!-- ERROR MESSAGE IF NOT RECORDS FOUND-->
<aura:if isTrue="{!v.Message}">
<div class="slds-notify_container slds-is-relative">
<div class="slds-notify slds-notify_toast slds-theme_error" role="alert">
<div class="slds-notify__content">
<h2 class="slds-text-heading_small">No Records Found...</h2>
</div>
</div>
</div>
</aura:if>
<!-- TABLE CONTENT-->
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="S.no">S.no</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="CaseNumber">CaseNumber</div>
</th>
<th scope="col">
<div class="slds-truncate" title="CreatedDate">CreatedDate</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Text">Text</div>
</th>
</tr>
</thead>
<tbody>
<!--### display all records of searchResult attribute by aura:iteration ###-->
<aura:iteration items="{!v.searchResult}" var="acc" indexVar="count">
<tr>
<td>
<div class="slds-truncate">{!count + 1}</div>
</td>
<td>
<div class="slds-truncate">{!acc.AccountId}</div>
</td>
<td>
<div class="slds-truncate">{!acc.CaseNumber}</div>
</td>
<td>
<div class="slds-truncate">{!acc.CreatedDate}</div>
</td>
<td>
<div class="slds-truncate">{!acc.text__c}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:component>
controller.js-
({
Search: function(component, event, helper) {
var searchField = component.find('searchField');
var isValueMissing = searchField.get('v.validity').valueMissing;
// if value is missing show error message and focus on field
if(isValueMissing) {
searchField.showHelpMessageIfInvalid();
searchField.focus();
}else{
// else call helper function
helper.SearchHelper(component, event);
}
event.preventDefault();
},
})
helper.js-
({
SearchHelper: function(component, event) {
// show spinner message
component.find("Id_spinner").set("v.class" , 'slds-show');
var action = component.get("c.fetchCase");
action.setParams({
'searchKeyWord': component.get("v.searchKeyword"),
'recId': component.get("v.recordId")
});
action.setCallback(this, function(response) {
// hide spinner when response coming from server
component.find("Id_spinner").set("v.class" , 'slds-hide');
var state = response.getState();
if (state === "SUCCESS") {
var storeResponse = response.getReturnValue();
// if storeResponse size is 0 ,display no record found message on screen.
if (storeResponse.length == 0) {
component.set("v.Message", true);
} else {
component.set("v.Message", false);
}
// set numberOfRecord attribute value with length of return value from server
component.set("v.TotalNumberOfRecord", storeResponse.length);
// set searchResult list with return value from server.
component.set("v.searchResult", storeResponse);
}else if (state === "INCOMPLETE") {
alert('Response is Incompleted');
}else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
alert("Error message: " +
errors[0].message);
}
} else {
alert("Unknown error");
}
}
});
$A.enqueueAction(action);
},
})
