how to dynamically ...
 
Notifications
Clear all

[Solved] how to dynamically display default search word in search box in lwc

2 Posts
1 Users
0 Likes
540 Views
Posts: 205
 CWL
Admin
Issue starter
(@cwl)
Member
Joined: 11 years ago

how to dynamically display a default search word in search box in lwc like with a opportunity name and display related records in LWC.

Issue Tags
1 Reply
Posts: 205
 CWL
Admin
Issue starter
(@cwl)
Member
Joined: 11 years ago

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;
		}
	}
}
Reply
Share: