1

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);
    },
})
1

Just concatenate the results together:

var storeResponse = component.get("v.searchResult").concat(response.getReturnValue());

The remainder of your code can stay the same.

Note: Make sure you initialize the list beforehand, or you'll get an error:

<aura:attribute default="[]"
                name="searchResult" 
                type="List" 
                description="use for store and display account list return from server"/>
  • Is there a way to find out if a user is making unique searches in the above search box? – user51241 Jul 8 '18 at 20:27
  • @user51241 You could keep track of the previous searches in a list attribute. If you get stuck, perhaps consider asking a new question. – sfdcfox Jul 8 '18 at 21:09

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.