0

I have a lightning combobox (sizeCode) that I want to display the size codes for a product based on the model number that is input in a separate field.

Apex class is working to return an object filled with the size and color values for the model number entered. Example: DEBUG|ProductFilterWrapper:[baseColorCodeList=(BLACK, ORANGE, WHITE, BLUE, PURPLE, PINK), error=null, integrationError=null, sizeCodeList=(M, S, L, XL, XS)].

How can I pull those values into my LWC component and display them in my combobox?

HTML:

Combobox:
<div>
    <lightning-accordion class="slds-accordion" active-section-name=[] onsectiontoggle={handleAccordionToggle} allow-multiple-sections-open="true">
        <lightning-accordion-section name="A" label="Advanced Search">
            <p>Enter a Model Number to use advanced search.</p>
            <div class="slds-col_padded" style="display: flex">
                <lightning-combobox class="slds-combobox colorCode" variant="label-stacked" name="colorCode" label="Base Color" disabled data-my-id="colorCode">

                </lightning-combobox>

                <lightning-combobox class="slds-combobox sizeCode" variant="label-stacked" name="sizeCode" options={sizeOptions} label="Size Code" disabled data-my-id="sizeCode">

                </lightning-combobox>
            </div>

        </lightning-accordion-section>
    </lightning-accordion>
</div>

Input Field:

<div class="slds-col_padded slds-size_1-of-2 modelNumber">
    <lightning-input label="Model Number" data-id ="modelnumber" variant="label-stacked" name="ModelNumber__c"
                     pattern="^[0-9]+$"
                     message-when-pattern-mismatch="Only numbers allowed."
                     class="customInputField"
                     onchange={handleModelNumberChange}></lightning-input>
</div>

APEX Code:

@AuraEnabled
public static ProductFilterWrapper getColorAndSizeCodes(Decimal modelNumber){
    List<String> baseColorList = new List<String>();
    Set<String> baseColorSet = new Set<String>();

    List<String> sizeCodeList = new List<String>();
    Set<String> sizeCodeSet = new Set<String>();
    ProductFilterWrapper additionalProductFilters = new ProductFilterWrapper();
    try{
        String query = 'SELECT Id, BaseColorCode__c, SizeCode__c FROM Product__x ' +
                'WHERE ModelNumber__c = ' + modelNumber + ' LIMIT 2000';
        List<Product__x> productList = Database.query(query);

        for(Product__x product : productList){
            baseColorSet.add(product.BaseColorCode__c);
            sizeCodeSet.add(product.SizeCode__c);
        }
        baseColorList.addAll(baseColorSet);
        sizeCodeList.addAll(sizeCodeSet);
        additionalProductFilters.baseColorCodeList = baseColorList;
        additionalProductFilters.sizeCodeList = sizeCodeList;
    } catch (Exception error){
        Integration_Error__c ie = createIntegrationError(error);
        additionalProductFilters.integrationError = trac_Constants.ERROR_TYPE_PRODUCT_FILTER_ERROR + ie.Id;
        additionalProductFilters.error = true;
    }

    return additionalProductFilters;
}


public class ProductFilterWrapper {
    @AuraEnabled
    public List<String> baseColorCodeList;
    @AuraEnabled
    public List<String> sizeCodeList;
    @AuraEnabled
    public String integrationError;
    @AuraEnabled
    public Boolean error;
}

JS:

import {LightningElement, api, wire, track} from 'lwc';
import getProducts from '@salesforce/apex/trac_ProductSearchController.getProductList';
import getColorAndSizeCodes from '@salesforce/apex/trac_ProductSearchController.getColorAndSizeCodes';
import {getDataConnectorSourceFields} from "lightning/analyticsWaveApi";
import createCaseProducts from '@salesforce/apex/trac_ProductSearchController.createCaseProducts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

const LIMITSIZE = 2000;
const columns = [
 {
 label: 'Model Name', fieldName: 'ModelNameUrl', type:'url',
 typeAttributes: {
 label: {
 fieldName: 'ModelName__c'
 },
 target : '_blank'
 },
 wrapText: true, hideDefaultActions: true
 },
 {label: 'Model #', fieldName: 'ModelNumber__c', type: 'text', hideDefaultActions: true, wrapText: true},
 {label: 'Wo #', fieldName: 'WoNumber__c', type: 'text', hideDefaultActions: true, wrapText: true},
 {label: 'Po #', fieldName: 'PoNumber__c', type: 'text', hideDefaultActions: true, wrapText: true},
 {label: 'Size Code', fieldName: 'SizeCode__c', type: 'text', hideDefaultActions: true, wrapText: true},
 {label: 'Col Name', fieldName: 'ColorName__c', type: 'text', hideDefaultActions: true, wrapText: true},
 {label: 'Col Code', fieldName: 'BaseColorCode__c', type: 'text', hideDefaultActions: true, wrapText: true},
 {label: 'Price Year', fieldName: 'PriceYear__c', type: 'text', hideDefaultActions: true, wrapText: true},
];

const fieldType = {
 WoNumber__c : 'Number',
 PoNumber__c : 'Number',
 Sku__c : 'Number',
 ModelName__c : 'text',
 SizeCode__c: 'text',
 BaseColorCode__c: 'text',
 PriceYear__c: 'Number',
 ColorName__c: 'text',
 ModelNumber__c : 'Number'
};

export default class ProductSearch extends LightningElement {

 @api recordId;
 modelNumber = 16708;
 sizeOptions = [];
 // @track l_Options;
 fieldMap = new Map();
 rowOffSet = 0;
 products = [];
 error;
 errorMessage = '';
 searchResultsErrorMessage='';
 filter = '';
 columns = columns;
 totalRowCount = 0;
 noRowsSelected = true;
 showSpinner = false;
 a_Record_URL;
 dataLimitMessage ='';


 get options() {
 return [
 {label: 'Apparel', value: 'Apparel'},
 {label: 'Footwear', value: 'Footwear'}
 ];
 }

//{error, data}
 get sizeOptions() {

 return [getColorAndSizeCodes({modelNumber: this.modelNumber})
 .then((result =>{
 for(var i = 0; result.length; i++){
 this.sizeOptions.push({label: result[i].sizeCodeOptions, value:result[i].sizeCodeOptions});
 }
 }))
 .catch((error => {
 this.error = error;
 this.sizeOptions = undefined;
 }))];

 }

 get baseColorOptions(){

 }

 handleFieldChange(event) {
 if (this.fieldMap.has(event.target.name) && (event.target.value === '' || event.target.value === null)) {
 this.fieldMap.delete(event.target.name);
 } else {
 let fieldValue = event.target.value;
 this.fieldMap.set(event.target.name, fieldValue);
 }
 }

 handleModelNumberChange(event){
 this.handleFieldChange(event);
 let colorBox = this.template.querySelectorAll("lightning-combobox[data-my-id=colorCode]");
 let sizeBox = this.template.querySelectorAll("lightning-combobox[data-my-id=sizeCode]");
 if(event.detail.value != ''){
 colorBox.forEach(element=>{
 element.disabled = false;
 });
 sizeBox.forEach(element=>{
 element.disabled = false;
 });
 }else{
 colorBox.forEach(element=>{
 element.disabled = true;
 });
 sizeBox.forEach(element=>{
 element.disabled = true;
 });
 }
 }

handleAccordionToggle(event) {
    console.log('Accordion Test')
    console.log(this.template.querySelector("lightning-input[data-id=modelNumber]"));
    //console.log(getColorAndSizeCodes(this.template.querySelector("lightning-input[data-id=modelNumber]").value));


}

1 Answer 1

0

You need to call the apex method getColorAndSizeCodes from the change handler of the Model number input field i.e. handleModelNumberChange.

baseColorCodeList array from the apex response should become the options for your colorCode combobox and the sizeCodeList array from the apex response will become the options for your sizeCode combobox.

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.