2

In my lightning web component, I have a which has a multiselect picklist field from an object. I want to populate that field with values from a list returned from an apex method. I tried to assign the result (which is a list of strings) to the variable in LWC. Though I can see the values in console.log, I am not able to see it in the .

HTML:

<lightning-record-edit-form record-id={recordId} object-api-name={objectName}>

<!-- This is the custom multiselect picklist field -->
<!-- Doesnt show selected options as English;English123-->
<lightning-input-field field-name = "Languages__c" value={languagesVar}></lightning-input-field>

<!-- Also tried to use dual-listbox but it didnt work either-->
<lightning-dual-listbox name="Languages"
                            label="Languages"
                            source-label="Available"
                            selected-label="Chosen"  
                            value={languagesVar}
                            onchange={handleChange} ></lightning-dual-listbox>

</lightning-record-edit-form>

JS:

import getLanguagesMethod from '@salesforce/apex/LanguageController.getLanguagesMethod';
@api languagesVar;

get languagesVar(){
        let returnLangs;
       
        getLanguagesMethod({ recordId: this.recordId })
                .then(result => {
                   returnLangs = result;
                   console.log(JSON.stringify(returnLangs)); //Output: "English;English123"
                   console.log(returnLangs);//Output: English;English123
                })                 
        }
        
        return returnLangs;
}

Apex:

@AuraEnabled
public static String getLanguagesMethod(Id recordId) {
        Contact con = [Select Languages__c from contact where Id = :recordId limit 1];
        return con.Languages__c; {English;English123}
}

How do I assign value to languagesVar in JS to show 'Selected' values of the multiselect picklist in LWC as 'English' and 'English123' which is returned from a string (that is ; separated) or from a List returned from Apex.

Thanks!

1
1

A required attribute, options, is missing from your lightning-dual-listbox.
It must be an array of object with two attributes: value and label. I.E.:

options = [
    { value: 'English', label: 'English' },
    { value: 'English123', label: 'English 123' },
    { value: 'French', label: 'French' },
    { value: 'Spanish', label: 'Spanish' }
];

Then value attribute must be an array, not a string, and the array must hold a subset of values included in options. I.E.:

values = [
    'English',
    'English123'
];

You can call split() on your string to divide it into an array of substring.

So your controller could be:

@api selectedLanguages = [];
wiredLanguages; // in order to call refreshApex(this.wiredLanguages);

options = [
    { value: 'English', label: 'English' },
    { value: 'English123', label: 'English 123' },
    { value: 'French', label: 'French' },
    { value: 'Spanish', label: 'Spanish' }
];

@wire(getLanguagesMethod, { recordId: '$recordId'})
getLanguages(result) {
    this.wiredLanguages = result;
    if (result.data) {
        this.selectedLanguages = result.data.split(';');
    } else if (result.error) {
        console.log('Something went wrong while retrieving languages:', result.error);
    }
}

HTML:

<lightning-dual-listbox
    name="Languages"
    label="Languages"
    source-label="Available"
    selected-label="Chosen"  
    options={options}
    value={selectedLanguages}
    onchange={handleChange} >
</lightning-dual-listbox>

Be sure to take a look at the reference page.
By the way, the apex method could be cacheable.

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.