Hello friends, today we learn in this post , how to create multi pick list value select and remove ,...
let us start........
Step=>1.
go to developer console and go to File=>New=>Lightning Component
multiPicklist.cmp
<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>
Step=>2.
multiPicklistController.js
({
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"));
}
})
Step=>3.
multiPicklistHelper.js
({
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);
},
})
Step=>4.
Create a Apex Class
goto File=>New=>Apex Class
multiPicklistCtrl.apxc
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;
}
}
Step=>5.
create a App test
go to File=>New=>Lightning Application
testApp.app
type this code for test your component
<aura:application extends="force:slds">
<c:multiPicklist/>
</aura:application>
after that right hand corner click on Preview.....
Output:
click full for watching video clearly in video section...
Thanks.!
let us start........
Step=>1.
go to developer console and go to File=>New=>Lightning Component
multiPicklist.cmp
<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>
Step=>2.
multiPicklistController.js
({
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"));
}
})
Step=>3.
multiPicklistHelper.js
({
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);
},
})
Step=>4.
Create a Apex Class
goto File=>New=>Apex Class
multiPicklistCtrl.apxc
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;
}
}
Step=>5.
create a App test
go to File=>New=>Lightning Application
testApp.app
type this code for test your component
<aura:application extends="force:slds">
<c:multiPicklist/>
</aura:application>
after that right hand corner click on Preview.....
Output:
click full for watching video clearly in video section...
Thanks.!
Buy me a coffee
How to SAVE the selection on record?
ReplyDelete