You need to sign in to do that
Don't have an account?
raSFUser
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
Combobox JS
How can i make the renderedCallback() retrigger or the options list regenerate when a new record is added the the Salesforce Custom Object.
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.
riffindus12345
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.