Apex Code Development You need to sign in to do that
Don't have an account?
Sangeetha T Custom Search Modal Results are inserting only for the first row
URGENT !!!! Need Help
I have a custom search lookup modal window which will search the products and display results
PFB for the code
Now I'm calling this child LWC in my parent LWC which has the Table row
Now when I click the modal popup its opens and allows me to search and gets inserted on the first row of adding the products
But for the second row or third row, it's not working and the selected value from the search result does not get included
PFB for calling the child component
I'm not sure what I'm missing - Any help will be appreciated
I have a custom search lookup modal window which will search the products and display results
PFB for the code
<template>
<template if:true={isShowModal}>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_medium">
<div class="slds-modal__container">
<!-- modal header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModalBox}>
<lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" style="text-align: left;" class="slds-text-heading_medium">Product Custom Search</h2>
</header>
<!-- modal body start -->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<ul class="slds-list_horizontal">
<li class="slds-item_detail" style="margin-left: 10px;">
<div style="font-weight: bold;">
<lightning-input type="text" label="Product Name" name="name" variant="standard" placeholder="Enter Product Name" onchange={handleChange} disabled={isnameDisable}></lightning-input>
</div>
</li>
<li class="slds-item_detail" style="margin-left: 10px;">
<div style="font-weight: bold;">
<lightning-input type="text" label="Product ID" name="MOLProductID" variant="standard" placeholder="Enter Product ID" onchange={handleChange} disabled={isMOLProductIDDisabled}></lightning-input>
</div>
</li>
<li class="slds-item_detail" style="margin-left: 10px;">
<div style="font-weight: bold;">
<lightning-input type="text" label="Old Material Number" name="MOLOldMaterialNumber" variant="standard" placeholder="Enter Old Material Number" onchange={handleChange} disabled={isMOLOldMaterialNumberDisable}></lightning-input>
</div>
</li>
<li class="slds-item_detail" style="margin-top: 23px;">
<div>
<lightning-button variant="brand" label="Search" title="Search" icon-name="utility:search" class="slds-m-left_x-small" onclick={handleSearch}></lightning-button>
</div>
</li>
</ul>
<div if:true={isDataTrue} style="margin-top: 20px;">
<div class="slds-clearfix">
<p class="slds-float_left"><strong>No of Records: {recordLength}</strong></p>
<lightning-button variant="brand" label="Save and Select" title="Save and Select" class="slds-button slds-float_right databuttons" onclick={handleSave}></lightning-button>
<lightning-button variant="destructive" label="Cancel" title="Cancel" class="slds-button slds-float_right databuttons" onclick={hideModalBox}></lightning-button>
</div>
<div class="fixTableHead">
<table>
<thead>
<tr>
<th>Select</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Old Material Number</th>
</tr>
</thead>
<tbody>
<template for:each={productList} for:item="product">
<tr key={product.Id}>
<td>
<input type="radio" class="selectId" name="productRecord" value={product.Id} />
</td>
<td>{product.Name}</td>
<td>{product.MOL_ProductID__c}</td>
<td>{product.MOL_OldMaterialNumber__c}</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
<div if:true={isDataFalse}>
<p><strong>No Records Found.</strong></p>
</div>
</div>
<!-- modal footer start-->
<footer class="slds-modal__footer"></footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
<!-- modal end -->
</template>
import { LightningElement,track,api} from 'lwc';
import getProductRecords from '@salesforce/apex/PdrProductsearch.getProductRecords';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class PdrProductCustomSearch1 extends LightningElement {
@api recordId;
@track isShowModal = false;
@track recordLength=0;
@track isDataTrue = false;
@track isDataFalse = false;
@track productList = [] // added as a list
searchType='';
searchTerm='';
handleChange = (event) =>{
this.searchType = event.target.name;
this.searchTerm = event.target.value;
}
get isnameDisable(){
return ( this.searchType != 'name' && this.searchTerm != ''? true : false );
}
get isMOLProductIDDisabled(){
return ( this.searchType != 'MOLProductID' && this.searchTerm != ''? true : false );
}
get isMOLOldMaterialNumberDisable(){
return ( this.searchType != 'MOLOldMaterialNumber' && this.searchTerm != ''? true : false );
}
resetData(){
this.productList = null;
this.recordLength = 0;
this.searchTerm = '';
this.isDataTrue = false;
this.isDataFalse = false;
}
@api showModalBox() {
this.isShowModal = true;
}
hideModalBox() {
this.resetData(0);
this.isShowModal = false;
}
getProductNameById = (obj,id) =>{
let mapObj = new Map();
for (let i=0; i<Object.keys(obj).length; i++){
mapObj.set(obj[i].Id,obj[i].Name);
}
if (mapObj.has(id)){
return mapObj.get(id);
}
}
handleSave = (event) =>{
let recIds = this.template.querySelectorAll('.selectId');
let prodId = '';
let prodName = '';
for (let i=0; i<recIds.length; i++){
if (recIds[i].checked){
prodId = recIds[i].value;
break;
}
}
prodName = this.getProductNameById(this.productList,prodId);
const customEvt = new CustomEvent(
"pass",
{ detail : { id: prodId, name : prodName}
}
);
this.dispatchEvent(customEvt);
this.hideModalBox(0);
}
handleSearch = (event) =>{
if( this.searchTerm!='' && this.searchType!='' ){
getProductRecords({searchTerm : this.searchTerm, searchType : this.searchType})
.then( (response) =>{
console.log(response);
if(response!=null){
this.productList = JSON.parse(JSON.stringify(response));
let count = Object.keys(this.productList).length;
console.log(count);
this.recordLength = count;
if (this.recordLength>0) {
this.isDataTrue = true;
this.isDataFalse = false;
}else{
this.productList = null;
this.isDataFalse = true;
this.isDataTrue = false;
}
}
else{
this.productList = null;
this.isDataFalse = true;
this.isDataTrue = false;
}
}
).catch( (error) => {
const event = new ShowToastEvent({
title: 'Error',
variant: 'error',
message: error.body.message,
});
this.dispatchEvent(event);
this.productList = null;
this.isDataFalse = true;
this.isDataTrue = false;
}
);
}else{
this.productList = null;
this.isDataFalse = true;
this.isDataTrue = false;
}
}
}
public without sharing class PdrProductsearch {
@AuraEnabled(cacheable=true)
public static List<Product2> getProductRecords(String searchTerm, String searchType){
try {
List<Product2> proRec = new List<Product2>();
String searchTxt = '%'+searchTerm+'%';
if(searchType=='name' && searchTerm!='')
{
proRec = [ Select Id,Name,MOL_ProductID__c,MOL_OldMaterialNumber__c From Product2 where Name like : searchTxt With SECURITY_ENFORCED];
}
else if(searchType=='MOLProductID' && searchTerm!='')
{
proRec = [ Select Id,Name,MOL_ProductID__c,MOL_OldMaterialNumber__c From Product2 where MOL_ProductID__c like : searchTxt With SECURITY_ENFORCED];
}
else if(searchType=='MOLOldMaterialNumber' && searchTerm!='')
{
proRec = [ Select Id,Name,MOL_ProductID__c,MOL_OldMaterialNumber__c From Product2 where MOL_OldMaterialNumber__c like : searchTxt With SECURITY_ENFORCED];
}
else
{
proRec = null;
}
//Checking data..
System.debug('Queried Data-->'+proRec);
//Checking whether Record List is not null and has atleast some Records
if( proRec!=null && proRec.size()>0 ){
return proRec;
}else{
return null;
}
} catch (Exception e) {
throw new AuraHandledException(e.getMessage());
}
}
}
Now I'm calling this child LWC in my parent LWC which has the Table row
Now when I click the modal popup its opens and allows me to search and gets inserted on the first row of adding the products
But for the second row or third row, it's not working and the selected value from the search result does not get included
PFB for calling the child component
<td>
<lightning-input type="search" data-index={indx} name="selectedProductName" value={item.selectedProductName}
onchange={handleAllData} onclick={handleChildModal} label="Material" variant="standard" required></lightning-input>
<c-pdr-product-custom-search-1 data-index={indx} onpass={handleSelectedRec} ></c-pdr-product-custom-search-1>
I'm not sure what I'm missing - Any help will be appreciated
handleChildModal(){ const childObj = this.template.querySelector('c-pdr-product-custom-search-1'); childObj.showModalBox(); } handleSelectedRec = (event) =>{ this.selectedProductName=''; let index = event.target.dataset.index; console.log('OUTPUT : Index ',index); this.selectedProductId = event.detail.id; console.log('Value of Acc Id From Child is-->'+this.selectedAccId); this.selectedProductName = event.detail.name; this.listOfMaterials[index].selectedProductName = this.selectedProductName; console.log('Value of Acc Name From Child is-->'+this.selectedAccName); }