function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sarthak nigam 3sarthak nigam 3 

How to fetch and save data in duallist box from databse in lightning

I have a requirement where I need to do the below steps
1) fetch data for dualist box and display from the database
2) the user can change the value
3) save the change value back to the database
Deepali KulshresthaDeepali Kulshrestha
Hi Sarthak,

Here I have created a component to show the values of the duallistbox:
 Please refer to the following code for Component:
<aura:component controller="multiPicklistCtrl">
    <!--init handler event call "initialize" function on component load
        and fetch picklist values-->
    <aura:handler name="init" value="{! this }" action="{! c.initialize }"/>
    
   <!--Declare Attributes-->  
    <aura:attribute name="objInfo" type="account" default="{sobjectType : 'Account'}" />
    <aura:attribute name="listSkillsOptions" type="List" default="[]"/>
    <aura:attribute name="selectedSkillsItems" type="List" default="[]"/>
  
   <!-- lightning dualListbox component -->
    <lightning:dualListbox aura:id="selectOptions"
                           name="Skills"
                           label= "Select Skills" 
                           sourceLabel="Available Options" 
                           selectedLabel="Selected Options" 
                           options="{! v.listSkillsOptions }"
                           value="{! v.selectedSkillsItems }"
                           onchange="{! c.handleChange }"/>
    <br/>
    
    <lightning:button variant="brand" label="Selected Items" onclick="{!c.getSelectedItems }" />
</aura:component>

Controller.js for the component:
 initialize: function(component, event, helper) {
       // call the fetchPickListVal helper function,
       // and pass (component, Field_API_Name, target_Attribute_Name_For_Store_Value)   
        helper.fetchPickListVal(component, 'Skills__c', 'listSkillsOptions');
    },
    handleChange: function (component, event) {
       // get the updated/changed values   
        var selectedOptionsList = event.getParam("value");
       // get the updated/changed source  
        var targetName = event.getSource().get("v.name");
       
        // update the selected itmes  
        if(targetName == 'Skills'){ 
            component.set("v.selectedSkillsItems" , selectedOptionsList);
        }
        
    },
    getSelectedItems : function(component,event,helper){
       // get selected items on button click 
        alert(component.get("v.selectedSkillsItems"));
    }

Helper.js for the component:
fetchPickListVal: function(component, fieldName,targetAttribute) {
      // call the apex class method and pass fieldApi name and object type 
        var action = component.get("c.getselectOptions");
        action.setParams({
            "objObject": component.get("v.objInfo"),
            "fld": fieldName
        });
        var opts = [];
        action.setCallback(this, function(response) {
            if (response.getState() == "SUCCESS") {
                var allValues = response.getReturnValue();
                for (var i = 0; i < allValues.length; i++) {
                    opts.push({
                        label: allValues[i],
                        value: allValues[i]
                    });
                }
                component.set("v."+targetAttribute, opts);
            }else{
                alert('Callback Failed...');
            }
        });
        $A.enqueueAction(action);
    },

Apex Class for the component:
public class multiPicklistCtrl {
    
    @AuraEnabled
    public static List < String > getselectOptions(sObject objObject, string fld) {
        system.debug('objObject --->' + objObject);
        system.debug('fld --->' + fld);
        List < String > allOpts = new list < String > ();
        // Get the object type of the SObject.
        Schema.sObjectType objType = objObject.getSObjectType();
        
        // Describe the SObject using its object type.
        Schema.DescribeSObjectResult objDescribe = objType.getDescribe();
        
        // Get a map of fields for the SObject
        map < String, Schema.SObjectField > fieldMap = objDescribe.fields.getMap();
        
        // Get the list of picklist values for this field.
        list < Schema.PicklistEntry > values =
            fieldMap.get(fld).getDescribe().getPickListValues();
        
        // Add these values to the selectoption list.
        for (Schema.PicklistEntry a: values) {
            allOpts.add(a.getValue());
        }
        system.debug('allOpts ---->' + allOpts);
        allOpts.sort();
        return allOpts;
    }
    
}

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha