I have a dualListBox which should get it's values from a multi-picklist field and it looks like the values are populating but I can't actually see the text. dualListBox example


    <aura:attribute name="options" type="List" default="[]"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
            <div class="resultsCardComp">
                <aura:if isTrue="{!not(empty(v.cartLineItems))}">
                    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped slds-p-around_x-small">
                                <th class="" scope="col"><div class="slds-truncate tableHeader" title="{!$Label.c.Product_Name}">{!$Label.c.Product_Name}</div></th>

                                <th class="" scope="col"><div class="slds-truncate tableHeader" title="{!$Label.c.Tech_Doc_Type}">{!$Label.c.Tech_Doc_Type}</div></th>

                                <th class="" scope="col"><div class="slds-truncate tableHeader" title="{!$Label.c.Tech_Doc_Type}">{!$Label.c.Remove}</div></th>

                                <th class="" scope="col"><div class="slds-truncate" title=""></div></th>
                        <aura:iteration items="{!v.cartLineItems}" var="cartItem" indexVar="index">
                            <tr aura:id="cartTableRow" id="{!index}">
                                <td class="productName"><ui:outputText value="{!cartItem.productName}"/></td>

                                    <lightning:dualListbox class="darkText" name="languages"
                                    label= "Select Languages"
                                    fieldLevelHelp="Select your preferred languages"

                                <td><lightning:buttonIcon iconName="utility:close" variant="bare" value="{!cartItem}" name="{!index}" onclick="{! c.handleProductRemove }" alternativeText="{!$Label.c.Remove}" /></td>
                            <lightning:input aura:id="hiddenInput" value="{!cartItem}" class="slds-hidden hiddenInput" />
                        <lightning:button label="{!$Label.c.Proceed_to_Checkout}" variant="brand" onclick="{!c.checkOut}"></lightning:button>


    doInit : function(component, event, helper) {

        var actionGetAllDocTypes = component.get("c.getDocumentTypes");
        actionGetAllDocTypes.setCallback(this, function(a){
            if(a.getState() === "SUCCESS") {
                component.set("v.options", a.getReturnValue());
                console.log("return value -> " + a.getReturnValue());

        helper.getContactDetails(component, event);

    handleChange: function(component, event) {
        var selectedOptionValue = event.getParam("value");

Relevant Order_Tech_Docs_Controller.cls

    public static List<String> getDocumentTypes() {
        List<String> options = new List<String>();
        Schema.DescribeFieldResult fieldResult = GT_Tech_Doc__c.Addtional_Documents_Required__c.getDescribe();
        List<Schema.PicklistEntry> pListEntries = fieldResult.getPicklistValues();
        for (Schema.PicklistEntry p : pListEntries) {
        return options;

The console.log statement in Order_Tech_DocsController.js displays my expected results in the Chrome console.

I have tried hardcoding some values for the list and can see them so it is not something stupid like my css text colour is white!

2 Answers 2


Because DualList expecting data in label, value format. But you are not provinding data in supported format.Convert your data in label, value and then use that

for(var key of a.getReturnValue()) {
        var item = {
            "value":  key,
            "label": key
cmp.set('v.options', dataImportFields);

Or as suggested by SFDCfox, you can also do this

dataImportFields = a.getReturnValue().map(key=> ({ value: key, label: key }))
cmp.set('v.options', dataImportFields);

official docs: https://developer.salesforce.com/docs/component-library/bundle/lightning:dualListbox/example#lightningcomponentdemo:exampleDualListboxRequiredValues

  • 1
    FYI: dataImportFields = a.getReturnValue().map(key=> ({ value: key, label: key })) would be the shorter (and more idiomatic way) of writing this.
    – sfdcfox
    Apr 21, 2020 at 11:10

As also told in Documentation i guess you are suppose to send the options in below format

[{ label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' },
        { label: 'Italian', value: 'it' },
        { label: 'Japanese', value: 'ja' }]

not just labels but there values too.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .