You need to sign in to do that
Don't have an account?
sarthak 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
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
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