Scenario based Salesforce interview questions/Problems: Create Dual ListBox in Lightning Component

Unknown 1/21/2019 4 comments

Create Dual ListBox in Lightning Component

Hey All!!!,I am going to show you that how you can create DualListBox using Salesforce Lightning Component

DualListbox component represents two side-by-side listboxes. Select one or more options in the list on the left. Move selected options in to the list at the right. The order of the selected options is maintained and you can reorder options.

Here I am taking account object and populating name fields values in to the duallistbox. You can assume any fields of any objects as per the requirements.

Here I am taking account object and populating name fields values in to the duallistbox. You can assume any fields of any objects as per the requirements.

Follow the below process step by step then you will be able to create Dual List Box:

Step 1: Create Apex Controller “DualListBoxCtrl.apex ” and use below code

public class DualListBoxCtrl {
    @AuraEnabled
        public static List<Account> getListValue(){
          List<Account> accName = [SELECT Id,Name FROM Account ORDER BY Account.Name ASC limit 500];
              if(accName != null && accName.size()>0){
                 return accName;
                 }
return accName; }
}

Step 2: Create lightning component “DualListBox.cmp” and use below code.

<aura:component controller="DualListBoxCtrl">
<aura:attribute name="options" type="List" default="[]"/>
<aura:attribute name="values" type="List" default="[]"/>
<aura:handler name="init" value="{!this }" action="{!c.init }"/>

    <lightning:dualListbox name="multipleOptions"
                           label= "Accounts"
                           sourceLabel="Available Options"
                           selectedLabel="Selected Options"
                           options="{!v.options}"
                           value="{!v.values}"
                           onchange="{! c.handleChange }"
                           variant = "label-hidden"/>
</aura:component>

Step 3: Create lightning Controller “DualListBoxController.js” and use below code.

({
     init: function (component, event, helper) {
     helper.getListHelper(component, event);
    },

handleChange: function (component, event) {

    // Get the selected values when user moves in to selected box.
    var valueList=component.get('v.values');
    console.log(JSON.stringify(valueList));
}

Step 4: Create lightning Helper “DualListBoxHelper.js” and use below code.

({

       getListHelper : function(component, event) {
       var action = component.get("c.getListValue");
       action.setCallback(this, function(a){
       var rtnValue = a.getReturnValue();
       component.set("v.values",rtnValue);

       var options = [];
       if(rtnValue.length>0){
               for(var i=0;i< rtnValue.length;i++){
                   options.push({ label: rtnValue[i].Name,value: rtnValue[i].Name});
               }
               console.log('options'+options.length);
               component.set("v.options",options);

}

});