When I create a dualListbox on a lightning component I am unable to see the values. When I inspect I can see that the values are there.

It almost looks like the color is set to white or transparent. But I have tried to change the color with no success.

I have ran a few tests: hardcoding the option values (this worked and I was able to see the values) and I changed the dualListbox to a inputSelect (this worked as well)

What gives? The only thing I can think of is that dualListbox's only support multi-select picklists. I am trying to get tie this to a single select picklist.

enter image description here

<aura:attribute name="leadSourceOptions" type="List"/>
<aura:attribute name="selectedLeadSource" type="List" />

<lightning:card >
        <!--Lead Source-->
        <lightning:dualListbox label= "Lead Source"
                            fieldLevelHelp="This is a dual listbox"
                            aura:Id = "leadSourceList"

loadLeadSourceList: function(component, event) {
    const action = component.get("c.loadLeadSourceList");

    action.setCallback(this, function (response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var leadData =  response.getReturnValue();
            console.log('source list: ' + leadData);
            component.set("v.leadSourceOptions", leadData); //should return a list of strings of the picklist values 
        } else {
            console.log('Lead Status: ' + state);
  • can you show what exactly did you see for leadData in console log? Aug 1 '19 at 17:35
  • I am creating a custom filter for records and I wanted to display a box of all of the Source options to the user. I wont be making update to the record's picklist. Is there another way to display the box?
    – Olivia
    Aug 1 '19 at 17:35
  • leadData is the source list in the console: source list: Advertisement,Customer Event,Employee Referral,Google AdWords,Other,Partner,Purchased List,Trade Show,Webinar,Website,Web Forms,Digital,Chat,Inbound ACD OBTM
    – Olivia
    Aug 1 '19 at 17:37
  • This is just a list of strings. What @gNerb written in answer is correct - it should be List of objects with label and value properties Aug 1 '19 at 17:39

Your comment says you are trying to use a list of strings.

The reason you're not seeing any values is because you should be using objects that contain a value and a label property which your strings do not contain.

if (state === "SUCCESS") {
    var leadData =  response.getReturnValue();
    var selectOptions = [];

        selectOptions.push({value:item, label:item});
    }, this);

    component.set("v.leadSourceOptions", selectOptions); //should return a list of strings of the picklist values 
} else {
    console.log('Lead Status: ' + state);

Here is the documentation for the component. It shows something similar.

  • thank you, that was it. I needed to have the value and label
    – Olivia
    Aug 1 '19 at 17:58

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.