Notifications
Clear all
Sep 30, 2022 7:22 am
how to dynamically display a default search word in search box in lwc like with a opportunity name and display related records in LWC.
1 Reply
Sep 30, 2022 7:25 am
Sample code - Html excerpt:
<template> <lightning-card title="DD Summary" custom-icon="custom:icon13"> <div class="slds slds-p-horizontal--medium"> <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_4-of-12 slds-m-bottom--medium"> <lightning-Input type="search" placeholder="Enter Opportunity Name to Search..." value={currentOptyName} name="optyName" class="optyName" onchange={handleChangeOptyName}> </lightning-input> </div> <div class="slds-col slds-size_6-of-12 slds-m-top--medium" style="margin-top: 19px; margin-left: 10px;"> <lightning-button label="Search Opportunity Name" size="small" variant="brand" onclick={handleOptySearch} icon-name="utility:search" icon-position="right"></lightning-button> </div> </div> <h2>Opportunity Name: <span><strong>{currentOptyName}</strong></span></h2><br /> <h3><strong><span style="color:brown;">{dataNotFound}</span></strong></h3> <table> <template for:each={records} for:item="quoteItem"> <tr key={quoteItem.Id}> <td> <table class="slds-table slds-table_cell-buffer slds-table_bordered" border="1" cellspacing="0" cellpadding="0" bordercolor="#ccc" style="border-collapse:collapse;"> <thead> <tr> <td colspan="13"> <table> <tr> <td>Quote: {quoteItem.Name}</td> </tr> </table> </td> </tr>
apex controller:
public with sharing class getRelatedQuotesDDSummaryLWC { @AuraEnabled(cacheable=true) public static List<SBQQ__Quote__c> retrieveQuoteData(string keySearch) { List<SBQQ__Quote__c> myQuoteList = [ SELECT Id, Name, SBQQ__Status__c, SBQQ__ExpirationDate__c, TESAPEMP__c FROM SBQQ__Quote__c WHERE SBQQ__Opportunity2__r.Name = :keySearch ]; return myQuoteList; } }
js:
import { api, LightningElement, track, wire } from "lwc"; import retrieveQuoteData from "@salesforce/apex/getRelatedQuotesDDSummaryLWC.retrieveQuoteData"; import { getRecord } from "lightning/uiRecordApi"; const OPP_FIELDS = ["Opportunity.Name"]; export default class dDSummary extends LightningElement { @api recordId; @track currentOptyName; @track searchOptyName; @track records; @track dataNotFound; handleChangeOptyName(event) { this.currentOptyName = event.target.value; } handleOptySearch() { this.searchOptyName = this.currentOptyName; } @wire(getRecord, { recordId: "$recordId", fields: OPP_FIELDS }) wiredOpp({ error, data }) { if (data) { this.currentOptyName = data.fields.Name.value; } else if (error) { console.log("UAC: error " + JSON.stringify(error)); } } @wire(retrieveQuoteData, { keySearch: "$searchOptyName" }) wireRecord({ data, error }) { if (data) { this.records = data; this.error = undefined; this.dataNotFound = ""; if (this.records === "") { this.dataNotFound = "No Quotes found for the Opportunity"; } this.error = error; this.data = undefined; } } }