[SalesForce] Dynamically setting value of lightning combobox in javascript

I have dynamically created lightning:comboboxes that are instantiated in my JavaScript controller for my lightning component. In my callback function after the component is created, I want to set the value of that combobox if a value exists for it (user is editing instead of creating).

I tried something like this:

$A.createComponent(
            'lightning:combobox',
            {
                'aura:id': 'objectSelect',
                'id': index,
                'placeholder': 'Select Object',
                'label': label,
                'value': 'selectedObject' + index,
                'options': options,
                'onchange': component.getReference('c.handleObjectSelect')
            },
            function(newCombobox, status, error){
                if(status === 'SUCCESS'){
                    var cmpBody = component.get('v.comboboxes');
                    cmpBody.push(newCombobox);
                    component.set('v.comboboxes', cmpBody);

                    var thisCriteria = component.get('v.currentCriteria');
                    if(thisCriteria != null){
                        newCombobox.set('v.value', thisCriteria.objectName);
                    }
                }
                else if(status === 'INCOMPLETE'){
                    console.log('No response from server');
                }
                else if(status === 'ERROR'){
                    console.log(error);
                }
            }
        );

But doing set('v.value') does not seem to work. I know you can do .get('v.value') to get the selected value, I had hoped you could also set it from there.

I also know you can specify 'value' as an attribute for the combobox and bind it to an aura attribute, but I am dynamically creating these, I don't want to hardcode aura attributes in case the combobox is there for it, I would like to be able to just set the value directly instead of through an aura attribute.

Is such a thing possible?

Best Answer

Couldn't you evaluate this just before creating the component? Just check for your object name, and then instantiate. Like so:

var thisCriteria = component.get('v.currentCriteria');
var comboboxValue = thisCriteria == null ? 'selectedObject' + index : thisCriteria.objectName

$A.createComponent(
        'lightning:combobox',
        {
            'aura:id': 'objectSelect',
            'id': index,
            'placeholder': 'Select Object',
            'label': label,
            'value': comboboxValue,
            'options': options,
            'onchange': component.getReference('c.handleObjectSelect')
        },

Related Solutions

[SalesForce] Lightning Web Component Combobox

Though I am late in answering this question, but here is the other approach to populate combo box values.

Controller

Here retrieve UserRole records based on SOQL query and no data transformation in this class

public with sharing class UserRoleController {

    @AuraEnabled (cacheable=true)
    public static List<UserRole> getUserRoles(){
        return [SELECT Id, Name FROM UserRole];
    }
}

js Controller class

In this class, inside wiredUserRoles() method, perform data transformation for value and label.

Use, roleOptions() getter property to return the array.

/* eslint-disable no-console */
import { LightningElement , wire, track} from 'lwc';

//import method which should be used from Controller
import getUserRoles from '@salesforce/apex/UserRoleController.getUserRoles';

let i=0;
export default class DisplayUserRole extends LightningElement {

    @track items = []; //this will hold key, value pair
    @track value = ''; //initialize combo box value

    @track chosenValue = '';

    @wire(getUserRoles)
    wiredUserRoles({ error, data }) {
        if (data) {

            //create array with elements which has been retrieved controller
            //here value will be Id and label of combobox will be Name
            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;
            this.contacts = undefined;
        }
    }

    //gettter to return items which is mapped with options attribute
    get roleOptions() {
        return this.items;
    }

    handleChange(event) {
        // Get the string of the "value" attribute on the selected option
        const selectedOption = event.detail.value;
        console.log('selected value=' + selectedOption);
        this.chosenValue = selectedOption;
    }

    //this value will be shown as selected value of combobox item
    get selectedValue(){
        return this.chosenValue;
    }
}

HTML

<template>
    <lightning-card title="Display User Role" icon-name="custom:custom63">
        <lightning-combobox
            name="Role"
            label="Role Name"
            placeholder="Choose Role"
            value={value}
            onchange={handleChange}
            options={roleOptions}>
        </lightning-combobox>
        <p></p>
        Selected Value:
        <lightning-formatted-text title="Chosen Key" value={selectedValue}></lightning-formatted-text>
    </lightning-card>

</template>

Output

After selection, display the value.

Unable to populate “value” of a lightning-combobox

You should be able to assign your modelPicklistValues.data.values to a property in your js controller and add the All value for it to be displayed and selectable in your template.

for example:

this.prop = [...modelPicklistValues.data.values]

Best Answer

Related Solutions

[SalesForce] Lightning Web Component Combobox

Unable to populate “value” of a lightning-combobox

Related Topic