Passing values from apex controller to js.controller and then display as default values in 'Dual Listbox'

Question

I have created an apex controller to pass 3 custom fields and display them in Dual Listbox as default values. I am using this Dual Listbox in a Flow to input mulit picklist values.

My Apex

public class EthnicityDualMultiboxAuraController {
@AuraEnabled    
public static List<Contact> getContact(){
    //Get logged in user details
    User loggedInUser = [SELECT Id, ContactId, Contact_ID_Text__C
                         FROM User
                         WHERE ID=: UserInfo.getUserId() LIMIT 1];
    System.debug('=loggedInUser===='+loggedInUser);        
       
    if (loggedInUser.ContactId !=NULL){
        return [select Id, Ethnicity_for_ITR_1__c, Ethnicity_for_ITR_2__c, Ethnicity_for_ITR_3__c
            FROM Contact WHERE  Id =:loggedInUser.ContactId];
    }
    else
        return [select Id, Ethnicity_for_ITR_1__c, Ethnicity_for_ITR_2__c, Ethnicity_for_ITR_3__c
            FROM Contact WHERE  Id =:loggedInUser.Contact_ID_Text__C];       
}
}

Component

<aura:component Controller="EthnicityDualMultiboxAuraController" access="global" 
           implements="Lightning:availableForFlowScreens">

   
<aura:attribute name="options" type="List" default="[]"/>
<aura:attribute name="values" type="List" default="[]"/>
<aura:attribute name="min" type="Integer" default="1"/>
<aura:attribute name="max" type="Integer" default="3"/>

<aura:handler name="init" value="{!this}" action="{!c.init}"/>

<lightning:dualListbox name="multipleOptions" 
                       label= "Select Ethnicity (at least 1 and at most 3)" 
                       sourceLabel="Available" 
                       selectedLabel="Selected" 
                       options="{!v.options}" 
                       value="{!v.values}" 
                       min="{!v.min}"
                       max="{!v.max}"
                       onchange="{! c.handleChange }"/>

</aura:component>

Java Controller

({
init: function (cmp) {
    var items = [
        { "label": "European/Pakeha", "value": "111 - European/Pakeha"}, 
        {  "label": "British and Irish", "value": "121 - British and Irish" },
        { "label": "Dutch", "value": "122 - Dutch" },
        { "label": "Greek", "value": "123 - Greek"},
        { "label": "Samoan", "value": "311 - Samoan"},
        { "label": "Tongan", "value": "331 - Tongan"},
        { "label": "Niuean", "value": "341 - Niuean"}, 
        { "label": "Tokelauan", "value": "351 - Tokelauan"},
        { "label": "Māori", "value": "211 - Māori" },];
        
        cmp.set("v.options", items);
        
        // "requiredOptions" must be a subset of values from "options"
       // cmp.set("v.values", );
},

handleChange: function (cmp, event) {
    // This will contain an array of the "value" attribute of the selected options
    var selectedOptionValue = event.getParam("value");
    // alert("Option selected with value: '" + selectedOptionValue.toString() + "'");
}
});

Dual Listbox working on the Flow. Only problem is how to get values from apex controller to the Selected list box as default. Thanks in advance

Answer 1

If you follow this link you can see that you will have to set values for setting a default value.

cmp.set("v.values", ["122 - Dutch", "311 - Samoan", "351 - Tokelauan"]);

And pass the values from your label value pair while setting the v.values

From Apex: you can create a wrapper, where you store both all label value pair and selected label value pair you want.

And then return DefaultAndSelectedValues from your apex controller and use them in UI as expected.

A quick example:

@AuraEnabled
public static DefaultAndSelectedValues fetchContacts(){
    List<Contact> contacts = [SELECT Id, Name FROM Contact LIMIT 10];
    List<LabelValueWrapper> allLabelValuePair = new List<LabelValueWrapper>();
    List<String> selectedValues = new List<String>();
    for (Integer i = 0; i < contacts.size(); i++) {
        LabelValueWrapper labelValueWrapper = new LabelValueWrapper();
        labelValueWrapper.label = contacts.get(i).Name;
        labelValueWrapper.value = contacts.get(i).Id;
        if(i > 7){
            selectedValues.add(contacts.get(i).Id);
        }
        allLabelValuePair.add(labelValueWrapper);
    }

    DefaultAndSelectedValues defaultAndSelectedValues = new DefaultAndSelectedValues();
    defaultAndSelectedValues.allLabelValuePair = allLabelValuePair;
    defaultAndSelectedValues.selectedValues = selectedValues;
    return defaultAndSelectedValues;
}

public class DefaultAndSelectedValues{
    @AuraEnabled public List<LabelValueWrapper> allLabelValuePair;
    @AuraEnabled public List<String> selectedValues;
}

public class LabelValueWrapper {
    @AuraEnabled public String label;
    @AuraEnabled public String value;
}

COMPONENT:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" controller="TestController">
    <aura:attribute name="options" type="List" default="[]"/>
    <aura:attribute name="values" type="List" default="[]"/>

    <aura:handler name="init" value="{!this}" action="{!c.init}"/>

    <lightning:dualListbox name="multipleOptions"
                           label= "Select Options"
                           sourceLabel="Available"
                           selectedLabel="Selected"
                           options="{!v.options}"
                           value="{!v.values}"
                           onchange="{! c.handleChange }"/>

</aura:component>

JS:

({
    init: function (cmp) {
        let cAction = cmp.get('c.fetchContacts');

        cAction.setCallback(this, function (response) {

            const state = response.getState();
            if (state === "SUCCESS") {
                let returnValue = response.getReturnValue();
                cmp.set("v.options", returnValue.allLabelValuePair);
                // "values" must be a subset of values from "options"
                cmp.set("v.values", returnValue.selectedValues);
            }
        });
        $A.enqueueAction(cAction);

    },

    handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
        const selectedOptionValue = event.getParam("value");
        alert("Option selected with value: '" + selectedOptionValue.toString() + "'");
    }
});