1

I am trying to update the selected value from pop up to the input fields. But the value is not getting reflected on UI. If any one have any idea please help below is my code HTML

<template>

<lightning-card icon-name="standard:product" title="Product">  

    <div class="slds-grid slds-wrap slds-p-top_medium slds-p-left_small slds-p-right_small" >

            <div class="slds-col slds-size_6-of-12 slds-p-right_small">                    
                <lightning-input name='{productName}' label="Name" data-field="Name" onchange={updateProductSearch}></lightning-input>
            </div>
            <div class="slds-col slds-size_6-of-12 ">
                <lightning-input name='{productArticlenumber}' label="Article Number" data-field="Articlenumber__c" onchange={updateProductSearch}></lightning-input>
            </div>

            <div class="slds-col slds-size_6-of-12 slds-p-right_small">                    
                <lightning-input name='{productEAN}' label="EAN" data-field="Ean__c" onchange={updateProductSearch}></lightning-input>
            </div>
            <div class="slds-col slds-size_6-of-12 ">
                <lightning-input name='{productBrand}' label="Brand" data-field="Brand__c" onchange={updateProductSearch}></lightning-input>
            </div>

            <div class="slds-col slds-size_6-of-12 slds-p-right_small">                    
                <lightning-input type="date" name='{productStartDate}' label="Advertising Start Date" data-field="AdvertisingStartDate__c" onchange={updateProductSearch}></lightning-input>
            </div>
            <div class="slds-col slds-size_6-of-12 ">
                <lightning-input type="date" name='{productEndDate}' label="Advertising End Date" data-field="AdvertisingEndDate__c" onchange={updateProductSearch}></lightning-input>
            </div>
            <div class="slds-col slds-size_6-of-12 "></div> 
            <div class="slds-col slds-size_6-of-12 "></div> 
    </div>

    <div class="slds-p-around_medium lgc-bg-inverse slds-align_absolute-center">
        <lightning-button class="slds-m-left_x-small" icon-name="utility:search" title="Search Product" label="Search" variant="neutral" onclick={searchProduct}></lightning-button>
        <lightning-button class="slds-m-left_x-small" icon-name="utility:clear" title="Clear Search " label="Clear" variant="neutral" onclick={clearSearch}></lightning-button>
    </div>

        <template if:true={bShowModal}>
                <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-scrollable_y" >
                   <div class="slds-modal__container " style="min-width: 80rem;">
                      <!-- 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={closeModal}>
                            <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" class="slds-text-heading_medium slds-hyphenate">Product</h2>
                      </header>
                      <!-- modal body start -->
                      <template if:true={productResult}>
                            <table class="slds-table slds-table_cell-buffer slds-table_bordered">                
                                <thead>
                                    <tr class="slds-line-height_reset">
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="Action">Action</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="Name">Name</div>                                                
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="Description EAN">Description EAN</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="Quantity">Quantity Unit Of Measure</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="Articlenumber">Articlenumber</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="EAN">EAN</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="Brand">Brand</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="Price">Advertising Price</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="Start Date">Advertising Start Date</div>
                                        </th>
                                        <th class="" scope="col">
                                            <div class="slds-truncate" title="Country Code">Country Code</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template for:each={productResult} for:item="pr" for:index="index">

                                        <tr class="slds-hint-parent" key={pr.prd.Id}>
                                            <th data-label="Action" scope="row" > 
                                                <!--<div class="slds-truncate" >{pr.isChecked}</div>-->

                                                <lightning-input type="checkbox" data-field={index} onchange={selectedProduct}></lightning-input>
                                            </th>
                                            <th data-label="Name" scope="row">
                                               <!--  <div class="slds-truncate" onmouseup="" >{pr.prd.Name}</div>
                                               <lightning-output-field type="text"  data-field={pr.prd.Name} onchange={showProductinfo}>

                                                </lightning-output-field>-->
                                                <template if:true={showinfo}>
                                                    <div>
                                                        test
                                                    </div>
                                                </template>

                                            </th>
                                            <td data-label="Description EAN">
                                                <div class="slds-truncate">{pr.prd.DescriptionEAN__c}</div>
                                            </td>
                                            <td data-label="Quantity">
                                                <div class="slds-truncate">{pr.prd.QuantityUnitOfMeasure}</div>
                                            </td>
                                            <td data-label="Articlenumber">
                                                <div class="slds-truncate">{pr.prd.Articlenumber__c}</div>
                                            </td>
                                            <td data-label="EAN">
                                                <div class="slds-truncate">{pr.prd.Ean__c}</div>
                                            </td>
                                            <td data-label="Brand">
                                                <div class="slds-truncate">{pr.prd.Brand__c}</div>
                                            </td>
                                            <td data-label="Price">
                                                <div class="slds-truncate">{pr.prd.AdvertisingPrice__c}</div>
                                            </td>
                                            <td data-label="Start Date">
                                                <div class="slds-truncate">{pr.prd.AdvertisingStartDate__c}</div>
                                            </td>
                                            <td data-label="Country Code">
                                                <div class="slds-truncate">{pr.prd.CountryCode__c}</div>
                                            </td>
                                        </tr>
                                    </template>                        
                                </tbody>
                            </table>   
                        </template>      


                      <!-- modal footer start-->
                      <footer class="slds-modal__footer">
                         <button class="slds-button slds-button_neutral" onclick={closeModal}>Cancel</button>
                      </footer>
                   </div>
                </section>
                <div class="slds-backdrop slds-backdrop_open"></div>
             </template>

</lightning-card>

JS

/* eslint-disable no-console */
import { LightningElement, track } from 'lwc';
import doSearchProducts  from 
'@salesforce/apex/lwcProductSearchController.doSearchProducts';


export default class LwcConsoleCaseAddProduct extends LightningElement {

@track productName = '';
@track productArticlenumber = '';
@track productEAN = '';
@track productBrand = '';
@track productStartDate = '';
@track productEndDate = '';
@track productsObject = '';

@track error;
@track bShowModal = false;
@track showinfo = false;
@track productResult;

updateProductSearch(event){
    this.productsObject = {...this.productsObject , [event.target.dataset.field] : event.detail.value};
}

searchProduct(){
    console.log('productsObject ::: ' + this.productsObject);
    doSearchProducts({caseId : 'caseRecordId', sCriteria : this.productsObject})
        .then(result => { 

            this.productResult  = [];
            this.productResult  = result;                
            this.bShowModal     = true;                
        })
        .catch(error =>{
            console.log('error data ::: ');
            this.error = error;
        });
}

closeModal(){
    this.bShowModal = false;
}
clearSearch(){
    //Name.target.dataset.value = '';
    this.productName            = '';
    this.productArticlenumber   = '';
    this.productEAN             = '';
    this.productBrand           = '';
    this.productStartDate       = '';
    this.productEndDate         = '';
}

selectedProduct(event){
    console.log('result data ::: ' + [event.target.dataset.field]);
    const indexval = [event.target.dataset.field];
    console.log('productResult data ::: ' + this.productResult[indexval].prd.Name);


    this.productName            = this.productResult[indexval].prd.Name;
    this.productArticlenumber   = this.productResult[indexval].prd.Articlenumber__c;
    this.productEAN             = this.productResult[indexval].prd.Ean__c;
    this.productBrand           = this.productResult[indexval].prd.Brand__c;
    this.productStartDate       = this.productResult[indexval].prd.AdvertisingStartDate__c;
    this.productEndDate         = this.productResult[indexval].prd.AdvertisingEndDate__c;/**/

    //this.productName            =  'testing' ;

    //console.log('productArticlenumber data ::: ' + this.productArticlenumber);
    //console.log('productEAN data ::: ' + this.productEAN);
    //console.log('productName data ::: ' + this.productName);

    this.bShowModal = false;
}

showProductinfo(){
    console.log('showProductinfo');
    this.showinfo = true;
}
}
  • I cant see productsObject on the UI what are you trying to acheive? Values are getting populated on productsObject its just they are not on the UI : developer.salesforce.com/docs/component-library/tools/… – Pranay Jaiswal Jul 31 '19 at 19:10
  • productObject is jut to send request. productresult is used to display the result. Once the result is displayed the used want to select the product and this selected product info should get populated in lightning-input fields ('productName', 'productArticlenumber') etc. selectedProduct(event) method is used to populate the values to input field. – Anu Aug 1 '19 at 9:01
0

You are not binding lightning-input to the value you get from the JS. Thus even if you set the fields in productsObject it wont be reflected in the UI.

Fix: Assign value to lightning-input

 <lightning-input name='{productName}' label="Name" data-field="Name" 
   value={productName} onchange={updateProductSearch}></lightning-input>

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.