2

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

Order_Tech_Docs.cmp

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

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        <lightning:card>
            <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">
                        <thead>
                            <tr>
                                <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>
                            </tr>
                        </thead>
                        <tbody>
                        <aura:iteration items="{!v.cartLineItems}" var="cartItem" indexVar="index">
                            <tr aura:id="cartTableRow" id="{!index}">
                                <td class="productName"><ui:outputText value="{!cartItem.productName}"/></td>

                                <td>
                                    <lightning:dualListbox class="darkText" name="languages"
                                    label= "Select Languages"
                                    sourceLabel="Available"
                                    selectedLabel="Selected"
                                    fieldLevelHelp="Select your preferred languages"
                                    options="{!v.options}"
                                    onchange="{!c.handleChange}"
                                    />
                                </td>

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

Order_Tech_DocsController.js

({
    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());
            }
        });
        $A.enqueueAction(actionGetAllDocTypes);

        helper.getContactDetails(component, event);
    }, 

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

Relevant Order_Tech_Docs_Controller.cls

    @AuraEnabled
    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) {
            options.add(p.getLabel());
        }
        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

5

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
        };
        dataImportFields.push(item);
}
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
  • 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
2

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.

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.