function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
raSFUserraSFUser 

Help with Lighting Web Component (LWC) Combobox dynamic options

I have a LWC Combobox whos options are pulled from a List of custom objects, and this LWC Combobox is on the Opportunity page. 

The issue is that a new value can be added to the list List of custom objects via another LWC and my Combobox options are not being rereshed.

Combobox Template 
<template>
        <div class="slds-theme_default">

    <lightning-combobox
            name="defaultOption"
            label="Default Option"
            options={options}
            value={value}
            placeholder="Select Default Option"
            onchange={handleChange} >
    </lightning-combobox>

    </div>
</template>

Combobox JS
 
import { LightningElement,  api, wire, track, } from 'lwc';
import updateOpportunityDefault from '@salesforce/apex/CustomDefaultOperations.updateOpportunityDefault';
import getDefaultOptions from '@salesforce/apex/CustomDefaultOperations.getDefaultOptions';
import getDefaultSelected from '@salesforce/apex/CustomDefaultOperations.getDefaultSelected';

import {getSObjectValue} from '@salesforce/apex';


import Id from '@salesforce/schema/Custom_Object_Opp_Default__Options__c.Id';
import custom__Possible__Option__c from '@salesforce/schema/Custom_Object_Opp_Default__Options__c.custom__Possible__Option__c';
import custom__Default__Option__c from '@salesforce/schema/Opportunity.custom__Default__Option__c';


import {ShowToastEvent} from 'lightning/platformShowToastEvent';


export default class opportunityDefaultOptionLWC extends LightningElement {
    
    @track value;
    @track options; 
    @track LastDefaultSelected; // stores the last option selected sucessfuly the combobox options
    @track defaultOptionsKeyValuePair = []; // this is the list of options created by the apex call

    @api sfOppId; // Salesforce Opportunity Id

	// on init get the current default option chosen form opportunity 
    connectedCallback() {
		// call apex that querys the opportuinity and returns an opportunity list (limit 1) to get the current default value form field
        getDefaultSelected({"sfOppId":this.sfOppId})
        .then( result => {
            try{
                console.log(result);
                console.log("getDefaultSelected = " + result);
                result.forEach(element => {
                   this.LastDefaultSelected = getSObjectValue(element, custom__Default__Option__c);
                   console.log("getDefaultSelected: LastDefaultSelected = " + this.LastDefaultSelected);
                });
            }catch (err){
                console.log(err);
                console.log("getDefaultSelected: getDefaultSelected is empty, error \n" + err);
            }
        })
        .catch(error =>{
            this.error = error;
            console.log(this.error);
            console.log("getDefaultSelected: getDefaultSelected, error \n" + this.error);
        })
    }

	// on render get the list of avalible options for default.
    renderedCallback(){
        console.log("renderedCallback: LastDefaultSelected: = "+ this.LastDefaultSelected);
		// call apex that querys a custom object returns a list of all valid options for this opportunity to populat the combobox options
        getDefaultOptions({"sfOppId":this.sfOppId})
        .then( result => {
            try{
                console.log("getDefaultOptions: result from apex below -");
                console.log(result);
				
                result.forEach(element => {
                        var id = getSObjectValue(element, Id);
                        var optionValue = getSObjectValue(element, custom__Possible__Option__c);
                        this.defaultOptionsKeyValuePair.push({ value: id, label: optionValue});
                    });
                    console.log("getDefaultOptions: Options List below -");

					// log list of options generated by apex call
                    console.log(this.defaultOptionsKeyValuePair);
					
					// set combobox options to list generated
                    this.options =  this.defaultOptionsKeyValuePair;
 
            }catch (err){
                console.log(err);
                console.log("getDefaultOptions: getDefaultOptions is empty, error \n" + err);
            }
        })
        .catch(error =>{

            this.error = error;
            console.log(this.error);
            console.log("getDefaultOptions: getDefaultOptions, error \n" + this.error);
        })
        
        this.value = this.LastDefaultSelected;

    }


	//when user selects new combobox value
    handleChange(event) { 
	
        console.log("handleChange: primaryQuoteChange");	
        // log out the orignal default and user selected
		var orignalDefaultOption =  this.value;
        var userSelectedDefaultOption = event.detail.value;
        console.log("handleChange: orignal value = " + orignalDefaultOption);
        console.log("handleChange: Selected value = " + userSelectedDefaultOption);

       try{
            console.log("handleChange: opportunityId = " + this.sfOppId + " userSelectedDefaultOption = " + userSelectedDefaultOption)
            
			// call an apex class that validates the option selected is valid for default selection
			updateOpportunityDefault({"opportunityId":this.sfOppId, "userSelectedDefaultOption":userSelectedDefaultOption})
                .then(() => {
                        console.log("handleChange: default updated.");

                        this.LastDefaultSelected = userSelectedDefaultOption;
                        console.log("handleChange: response success LastDefaultSelected = " + this.LastDefaultSelected);
                        const showsuccess = new ShowToastEvent({
                            title: 'Default Option Updated',
                            message: 'The Opprtunity Default Option has been updated to ' + userSelectedDefaultOption ,
                            variant: 'success'
                        });
                        this.dispatchEvent(showsuccess);
                    })
                    .catch(error => {
                        console.log("handleChange: Default Option update failed.");
                        this.LastDefaultSelected = orignalDefaultOption;

                        console.log("handleChange: response error LastDefaultSelected = " + this.LastDefaultSelected);
                        this.value = this.LastDefaultSelected;

                        console.log(error.body);
                    

                        var message = 'Error message: ' + error.body.message;
                        

                        const showerror = new ShowToastEvent({
                            title: 'Default Option Update Failed',
                            message: message,
                            variant: 'error',
                            mode: 'sticky'
                        });
                        this.dispatchEvent(showerror);
                    });


            }catch (err){
                console.log("handleChange: handleChange, error \n" + err);
                this.LastDefaultSelected = orignalDefaultOption;
                console.log("handleChange: Error LastDefaultSelected = " + this.LastDefaultSelected);
                this.value = this.LastDefaultSelected;

            }

        }
}

How can i make the renderedCallback() retrigger or the options list regenerate when a new record is added the the Salesforce Custom Object.  
riffindus12345riffindus12345
I am in same situation. Can you please let me know how you arrived the solution. I have dependent combobox, where the value of one combobox should populate based on selection of another combo box.