-1

Scenario:

Active accounts need to show selected List and other accounts in available Lists.

Trying to preSet the values in Lightning DualListBox.But Itsnot setting properly.

Trying to set the value in Following Line:

    alert('preSelectedoptions--->'+JSON.stringify(preSelectedoptions));

     component.set("v.values",preSelectedoptions); 

It shows below Value: enter image description here

Component Side:

<aura:component controller="AccountDualListController">
<aura:attribute name="listOptions" type="List" default="[]"/>
<aura:attribute name="values" type="List" default="[]"/>
<aura:attribute name="requiredOptions" type="List" default="[]"/>
<aura:attribute name="selectedArray" type="List" default="[]"/>
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<lightning:dualListbox aura:id="selectOptions" name="Select Options"  label="Select Options" 
                       sourceLabel="Available Options" 
                       selectedLabel="Selected Options" 
                       options="{!v.listOptions }"
                       value="{!v.values }"
                       onchange="{!c.handleChange }" />

Controller:

 ({
     doInit: function(component, event, helper) {
    var options = [];
    var action = component.get("c.getAccountList");
    component.set("v.listOptions", options);
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (component.isValid() && state == 'SUCCESS') {
            var resultArray = response.getReturnValue();
            var options = [];
            resultArray.forEach(function(result) {
                options.push({
                    value: result.Name,
                    label: result.Name
                });
            });
            component.set("v.listOptions", options);
            //new Line of Code
            helper.setPreSelect(component, event, helper);
        } else {
            console.log('Failed with state: ' + state);
        }
    });
    $A.enqueueAction(action);
}

})

Helper:

({
    setPreSelect: function(component, event, helper) {
        alert('calling@@@');
        var preSelectedoptions = [];
        var action = component.get("c.getsetPreSelectedList");
        component.set("v.values", preSelectedoptions);
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state == 'SUCCESS') {
                alert('call@@@' + JSON.stringify(response.getReturnValue())); //Value is coming from server side
                var resultArray = response.getReturnValue();
                var preSelectedoptions = [];
                resultArray.forEach(function(result) {
                    preSelectedoptions.push({
                        value: result.Name,
                        label: result.Name
                    });
                });
                alert('preSelectedoptions--->' + JSON.stringify(preSelectedoptions));
                component.set("v.values", preSelectedoptions); //setting here:but its not appearing in selectedList
            } else {
                console.log('Failed with state: ' + state);
            }
        });
        $A.enqueueAction(action);
    }
})

Apex Class:

 public class AccountDualListController {
@AuraEnabled
public static List<Account> getAccountList(){
    List<Account> accountList = [Select  Name from Account];
    return accountList;
} 
@AuraEnabled
public static List<Account> getsetPreSelectedList(){
List<Account> preSetaccountList = [Select  Name,SetPreset__c from Account  
 WHERE SetPreset__c=true];
  return preSetaccountList;
 }

}

and one more question is:

Q2:Instead of 2 methods,Is it possible to do it One method in apex ?

I have refereed below stack exchange Post:

lightning:duallistbox - how to preset selected values?

1
  • 2
    if you look at the example you shared we are just setting up the values in it not labels,while you are setting both label and value in preSelectedoptions – User6670 Feb 6 '20 at 17:08
1
  1. your setting a value and label in your setPreSelect function, which you shouldn't.

Q2:Instead of 2 methods,Is it possible to do it One method in apex ?

yes you can. check out below code.

controller.js

({
 doInit: function(component, event, helper) {
var options = [];
var action = component.get("c.getAccountList");
component.set("v.listOptions", options);
action.setCallback(this, function(response) {
    var state = response.getState();
    if (component.isValid() && state == 'SUCCESS') {
        var resultArray = response.getReturnValue();
        var options = [],
            preoptions= [];

        resultArray.forEach(function(result) {
            options.push({
                value: result.Name,
                label: result.Name
            });
            if(result.SetPreset__c){
                preoptions.push(result.Name);
            }
        });
        component.set("v.listOptions", options);
        //new Line of Code
        //helper.setPreSelect(component, event, helper);
        component.set("v.values", preoptions)
    } else {
        console.log('Failed with state: ' + state);
    }
});
$A.enqueueAction(action);
  }
 })

Apex

   @AuraEnabled
public static List<Account> getAccountList(){
    List<Account> accountList = [Select  Name,SetPreset__c  from Account];
    return accountList;
} 
0

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.