Usage Of lightning:dualListbox

In this blog, I am going to explain how to use salesforce lightning: dualListbox. A widget that provides an input list box, accompanied by a list box of selectable options. Order of selected options is saved. A lightning:dualListbox component represents two side-by-side list boxes. Select one or more options in the list on the left. Move selected options to the list on the right. The order of the selected options is maintained and you can reorder options. In this example, I am getting data from the Book_Categories__c objects and showing its as a  dualListbox available options.

Apex Class

public class BookController {
    @AuraEnabled
    public static List<Book_Categories__c> getBooksByAllCategories(){
        
        List<Book_Categories__c> categeroy = [Select  Name,(Select Name, Author_Name__c, Book_Categories__c,Publisher_Id__c from Books__r) from Book_Categories__c];
        return categeroy;
    } 
}

Component

<aura:component controller="BookController">
    <aura:attribute name="listOptions" type="List" default="[]"/>
    <aura:attribute name="defaultOptions" 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 }"/>
    <aura:attribute name="min" type="Integer" default="5"/>
    <aura:attribute name="max" type="Integer" default="10"/>
    <lightning:dualListbox aura:id="selectOptions" name="Select Options"  label="Select Options" 
                           sourceLabel="Available Options" 
                           selectedLabel="Selected Options" 
                           options="{! v.listOptions }"
                           value="{! v.defaultOptions }"
                           requiredOptions="{! v.requiredOptions }"
                           onchange="{! c.handleChange }"
                           min="{!v.min}"
                           max="{!v.max}"
                           
                           />
    
    
    Selected Values : 
    
    <aura:iteration items="{!v.selectedArray}" var="val" indexVar="indvar">
        <li>
            {!val}
        </li>
    </aura:iteration>
</aura:component>

 

/** Client-Side Controller **/
({
    doInit: function (component, event, helper) {
        var options = [
        ];
        var action = component.get("c.getBooksCategories");
        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);
            } else {
                console.log('Failed with state: ' + state);
            }
        });
        $A.enqueueAction(action); 
    },
    handleChange: function (component, event) {
        var selectedOptionsList = event.getParam("value");
        console.log(selectedOptionsList);
        component.set("v.selectedArray", selectedOptionsList);
        
    },
    
})

Below image shows the result of the component .