0

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

0

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() + "'");
    }
});

enter image description here

5
  • Thanks Nagendra, it worked
    – Jay Weera
    Nov 24 '21 at 20:29
  • Hi Nagendra, How can the pick list field is updated after selecting values in the Dual list box. There is no much resources available online for this process. Thanks in advance
    – Jay Weera
    Nov 24 '21 at 23:26
  • I am not able to understand the question, can you please explain it? Nov 25 '21 at 3:22
  • Sorry, Once the values are updated on the Dual list box, new values need to be updated to the source multi-pick list on the contact object. Actually the dual list box is used for the update/insert the values in lightning flow
    – Jay Weera
    Nov 25 '21 at 3:31
  • I want to get the selected list values as a collection separated by a semicolan ';' and insert on the multi-picklist on the contact object
    – Jay Weera
    Nov 25 '21 at 3:35

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.