0

I need to control a product Combobox by Pricebook Combobox in Lightning Web Component

I've created an LWC that contains two comboboxes: Pricebook list and Product list. I was able to get the list of Pricebooks using an apex method and displayed it as Combobox and when I choose a Pricebook, I can get its id in a change handler method in JS, but I do not know how to call a second apex method which is supposed to return the list of products filtered by the selected pricebook, and update the Products Combobox ?

HTML :

<template>
      <lightning-card title="List of products">
             <div class="slds-grid slds-wrap">
                     <lightning-combobox class="slds-col slds-size_2-of-6" name="Pricebooks"
                                            label="Pricebooks"
                                            placeholder="-Select Pricebook-"
                                            value={value}
                                            options={pricebookOptions}
                                            onchange={pricebookChange} >
                      </lightning-combobox>
                      <lightning-combobox class="slds-col slds-size_2-of-6" name="Products"
                                            label="Products"
                                            placeholder="-Select Product-"
                                            options={productOptions}
                                            onchange={...} >
                      </lightning-combobox>
              </div>
      </lightning-card>
</template>

JS :

export default class PriceBookPickList extends LightningElement {

    @track items = []; //this holds the array for records with value & label
    @track error;
    @track value;

    @wire(getPricebookObjects)
    pricebookList({error, data}){
      if(data){
        var i;
        for(i=0; i<data.length; i++) {
         this.items = [...this.items,{value: data[i].Id , label: data[i].Name}];                                   
        }                
        this.error = undefined;
      }else if(error){
          this.error=error;
      }
    }
    get pricebookOptions(){
        return this.items;
    }
    pricebookChange(event) {
            console.log("ID IS " + event.detail.value);
    }
}

Apex :

public with sharing class PricebookController {
    @AuraEnabled(Cacheable=true)
    public static List<Pricebook2> getAllPricebooks() {
        return [SELECT Id, Name FROM Pricebook2];
    }
}
2

Create another apex method getProducts which accepts pricebookId as parameter and returns list of products. Now in LWC js, implement wire service on that apex method which depends on dynamic property $pricebookId. As this is dynamic property, this wired service is invoked again when the property changes and not undefined.

pricebookChange(event) {
    console.log('ID IS ' + event.detail.value);
    this.pricebookId = event.detail.value;
}
@wire(getProducts, { pricebookId: '$pricebookId' })
prodsList({ error, data }) {
    if (data) {
        // handle products
        this.error = undefined;
    } else if (error) {
        this.error = error;
    }
}

Notice that because we are setting new value to pricebookChange in pricebookChange method, the dependent wired service prodsList will get invoked and returns the results.

  • Thank you @salesforce-sas, your solution was perfect. – Aymane Hammioui Sep 19 at 9:07

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.