0

I've built a LWC that displays a list of data (in card form) and has a search box that will allow users to search within the displayed list.

Here's what should happen:

  1. If the search box is empty (i.e. when the page first loads), all of the data should be displayed.

  2. If the user types in a search term, then all of the records that match that search term in the PO Number field should show up.

Here's what is happening:

  1. When the page first loads, no data is displayed.
  2. If the user types in a search term, then all of the records that match that search term in the PO Number field should show up. (Hooray!)
  3. If the user deleted what's in the search box, all of the data is displayed.

I'm trying to figure out why all the data isn't showing up when the component is first loaded.

LWC html

<template>
<lightning-card>
    <div class="slds-box slds-theme_default">
    <lightning-layout multiple-rows="true" pull-to-boundary="small">
        <lightning-layout-item padding="around-small" size="12" small-device-size="6" medium-device-size="6" large-device-size="6" class="coh-style-pre-heading">
            <h3>Product Order History</h3>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small" size="12" small-device-size="6" medium-device-size="6" large-device-size="6" class="slds-var-p-around_x-small">
            
                <lightning-input
                    label="Search Term"
                    variant="label-hidden"
                    placeholder="Search Orders by PO"
                    type="text"
                    value={searchTerm}
                    onchange={handleSearchTermChange}>
                
                </lightning-input>
            
        </lightning-layout-item>
        
    </lightning-layout>
    </div>
    <div class="slds-card__body_inner">
        <!-- Start order list -->
        <template if:true={orders.data}>
            <lightning-layout multiple-rows="true" pull-to-boundary="small">
                <template for:each={orders.data} for:item="o">
                    <lightning-layout-item padding="around-small" key={o.Id} size="12" small-device-size="6" medium-device-size="6" large-device-size="6" class="slds-var-p-around_x-small">
                        <!-- Start order tile -->
                        <lightning-card>
                            <header slot="title" class="tdw-events-title">{o.Order_Id__c}</header>
                            <div class="slds-var-p-horizontal_small">
                                <div class="tdw-events-results-filter-row">
                                    
                                    <div class="tdw-events-content-desc" >
                                        <p class="body" >PO: {o.PoNumber}</p>
                                        <p class="body" >Status: {o.Order_Status__c}</p>
                                        <p class="body" >Ship Date: {o.RollUp_Product_Confirm_Date__c}</p>
                                        <p class="body" >Tracking Number(s): {o.Tracking_Number__c}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="views-field">

                            </div>
                        </lightning-card>
                        <!-- End order tile -->
                    </lightning-layout-item>
                </template>
            </lightning-layout>
        </template>
        <!-- End order list -->
        <!-- Data failed to load -->
        <template if:true={orders.error}>
            <div class="slds-text-color_error">
                An error occurred while loading the list: {error.message} 
            </div>
        </template>

    </div>
</lightning-card>
</template>

LWS js

import { LightningElement,track,wire } from 'lwc';

 /** CustomerOrdersController.getOrders Apex method */
 import getOrders from '@salesforce/apex/CustomerOrdersController.getOrders';
 import searchOrders from '@salesforce/apex/CustomerOrdersController.searchOrders';
export default class OrderList extends LightningElement {
@wire(getOrders) orders;
@track searchTerm;

handleSearchTermChange(event) {
    this.searchTerm = event.target.value;
    const selectedEvent = new CustomEvent('newsearch',{detail: this.searchTerm});
    this.dispatchEvent(selectedEvent);
}

@wire(searchOrders, {
    searchTerm: '$searchTerm'
}) orders;

}

Apex controller

public with sharing class CustomerOrdersController {
@AuraEnabled(Cacheable=true)
public static order[] getOrders() {
    
        return [
            SELECT 
                Id, 
                Name,
                Order_Id__c,
                PoNumber,
                Order_Status__c,
                Service_Order_Start_Date_Time__c,
                RollUp_Product_Confirm_Date__c,
                Effective_Total_All_Orders__c,
                Tracking_Number__c,
                Account.Name 
            FROM Order
            WHERE Type != 'Change Order'
                AND PO_Override_by_Sales_Manager__c = False
                AND PoNumber != null
                AND (Management_Entity__r.Name = '610'
                    OR Management_Entity__r.Name = '640'
                    OR Management_Entity__r.Name = '650'
                    OR Management_Entity__r.Name = '660'
                    OR Management_Entity__r.Name = '440')
            ORDER BY RollUp_Product_Confirm_Date__c desc
            LIMIT 100
        ];
}

@AuraEnabled(cacheable=true)
public static order[] searchOrders(String searchTerm){
    if(String.isNotBlank(searchTerm)){
        String newSearchTerm = '%' + searchTerm + '%';
        return [
            SELECT 
                Id, 
                Name,
                Order_Id__c,
                PoNumber,
                Order_Status__c,
                Service_Order_Start_Date_Time__c,
                RollUp_Product_Confirm_Date__c,
                Effective_Total_All_Orders__c,
                Tracking_Number__c,
                Account.Name 
            FROM Order
            WHERE Type != 'Change Order'
                AND PO_Override_by_Sales_Manager__c = False
                AND PoNumber != null
                AND (Management_Entity__r.Name = '610'
                    OR Management_Entity__r.Name = '640'
                    OR Management_Entity__r.Name = '650'
                    OR Management_Entity__r.Name = '660'
                    OR Management_Entity__r.Name = '440')
                AND (PoNumber LIKE :newSearchTerm)
            ORDER BY RollUp_Product_Confirm_Date__c desc
            LIMIT 100
        ];
                   
    } else {
        return [
            SELECT 
                Id, 
                Name,
                Order_Id__c,
                PoNumber,
                Order_Status__c,
                Service_Order_Start_Date_Time__c,
                RollUp_Product_Confirm_Date__c,
                Effective_Total_All_Orders__c,
                Tracking_Number__c,
                Account.Name 
            FROM Order
            WHERE Type != 'Change Order'
                AND PO_Override_by_Sales_Manager__c = False
                AND PoNumber != null
                AND (Management_Entity__r.Name = '610'
                    OR Management_Entity__r.Name = '640'
                    OR Management_Entity__r.Name = '650'
                    OR Management_Entity__r.Name = '660'
                    OR Management_Entity__r.Name = '440')
            ORDER BY RollUp_Product_Confirm_Date__c desc
            LIMIT 100
        ];
    }

}
}

1 Answer 1

1

You declared orders twice:

@wire(getOrders) orders;
@wire(searchOrders, {
  searchTerm: '$searchTerm'
}) orders;

You can't name the same variable twice (how would the computer know which is which?). The easy fix from here is a getter to sort the problem out:

get orders() {
  return this.searchOrderResults || this.defaultOrders;
}
@wire(getOrders) defaultOrders;
@wire(searchOrders, {
  searchTerm: '$searchTerm'
}) searchOrderResults;

You may need some additional tweaking, but this should get you started.

3
  • Thanks for this! I updated the code and am still getting the same result, I'm wondering if return this.searchOrderResults || this.defaultOrders; actually needs to be an if/then statement. In a traditional or statement in javascript, how does the system know which one to return? Mar 19, 2021 at 14:59
  • @TheDevAdmin See Logical OR (||): ...the || operator actually returns the value of one of the specified operands, so if this operator is used with non-Boolean values, it will return a non-Boolean value. This is a fundamental rule of JS. You can use an IF statement if you like. You might need a more complicated setup involving wire handlers (see Wire Apex Methods to Lightning Web Components).
    – sfdcfox
    Mar 19, 2021 at 15:21
  • Got it, so with the || statement, it was always returning the first value. Testing for whether or not the search term was defined addressed the issue, since it is undefined when the component first loads: if(this.searchTerm === undefined){ return this.defaultOrders; } else { return this.searchOrderResults; } Mar 19, 2021 at 17:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .