0

I have several duallistbox. I want to Map all the options I have selected from all duallistbox. All duallistbox is created dynamically.

 $A.createComponent(
            "lightning:dualListbox",
            {
                "aura:id": apiName,
                "label": name + " Options (OPTIONAL):",
                "sourceLabel": "Options",
                "selectedLabel": "Selected",
                //"value": selectedBoxValuex,
                "options": subOptons,
                "onchange" : component.getReference("c.collectValues")
            },

Here is client-side controller which is not working:

   collectValues: function (component, event) {
        var selectedOptionValues = event.getParam("value");
        var listMap = new Map();  //will overwrite the old map
        var a = event.getSource();
        var boxId = a.getLocalId(); //aura:id from duallistbox
        listMap.set(boxId, selectedOptionValues);
        console.log("Try to get value using this key value: ", listMap);
        for (var [key, value] of listMap) {
            console.log('here is the key', key, ' and values ', value, ' and the map ', listMap);
        }

    }

The problem here is, the map will always be overwritten after I change something from duallistbox. what I want is adding always a new Map where the key is the ID and value would be a list of selected options. I think the reasons is because I always recall the function when i change something. How should I do it then? Any suggestions? Thanks for helping!

1 Answer 1

1

Directly, You can not achieve this. but you can achieve this by using javascript hack.

you can add a property in component variable like component["listMap"]

Update Code:

collectValues: function (component, event) {
    var selectedOptionValues = event.getParam("value");
    if(!component["listMap"])
        component["listMap"] = new Map();
    var a = event.getSource();
    var boxId = a.getLocalId(); //aura:id from duallistbox
    component["listMap"].set(boxId, selectedOptionValues);
    console.log("Try to get value using this key value: ", component["listMap"]);
    for (var [key, value] of component["listMap"]) {
        console.log('here is the key', key, ' and values ', value, ' and the map ', component["listMap"]);
    }

}
5
  • Thanks a lot! it's working. Do you know where I can find a good documentation about this Javascript hack? Commented Aug 21, 2018 at 11:45
  • One more question... Is it possible to set component["listMap"] as a aura:attribute value? if i got something like this <aura:attribute name="skillsFilterMap" type="Map" /> Commented Aug 21, 2018 at 11:53
  • No, It will not work with <aura:attribute>. it only work in component controller. Commented Aug 21, 2018 at 12:13
  • Is there any way that I can make it work with <aura:attribute>? Commented Aug 22, 2018 at 6:27
  • Yup, you can create a aura attribute but you have set value every time in the method. Commented Aug 22, 2018 at 7:44

You must log in to answer this question.

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