Hello friends, today we will learn to create Multi Select Picklist in Lightning Component. There is a standard component dual list box. Multi Select Picklist is used for select multiple options like interest in Lightning Component
We can utilize lightning:dualListbox segment to show multi select picklist field esteems. lightning:dualListbox part addresses two one next to the other rundown boxes. Select at least one choice in the rundown on the left. Move chose choices to the rundown on the right. The request for the chosen alternatives is kept up and we can reorder choices.
Here in the beneath model, I’m utilizing a Custom item “Book”, and the multi select picklist field “Type” of the “Book” object.
Apex Class:
public class PicklistController {
@AuraEnabled
public static List <String> getPiklistValues() {
List<String> plValues = new List<String>();
//Get the object type from object name. Here I've used custom object Book.
Schema.SObjectType objType = Schema.getGlobalDescribe().get('Book__c');
//Describe the sObject using its object type.
Schema.DescribeSObjectResult objDescribe = objType.getDescribe();
//Get the specific field information from field name. Here I've used custom field Genre__c of Book object.
Schema.DescribeFieldResult objFieldInfo = objDescribe.fields.getMap().get('Genre__c').getDescribe();
//Get the picklist field values.
List<Schema.PicklistEntry> picklistvalues = objFieldInfo.getPicklistValues();
//Add the picklist values to list.
for(Schema.PicklistEntry plv: picklistvalues) {
plValues.add(plv.getValue());
}
plValues.sort();
return plValues;
}
}
Lightning Component:
<!--MultiSelectPicklist.cmp-->
<aura:component controller="SampleAuraController">
<!--Declare Event Handlers-->
<aura:handler name="init" action="{!c.doInit}" value="{!this}" description="Call doInit function on component load to get picklist values"/>
<!--Declare Attributes-->
<aura:attribute name="GenreList" type="List" default="[]" description="Genre Picklist Values"/>
<aura:attribute name="selectedGenreList" type="List" default="[]" description="Selected Genre Picklist Values"/>
<div class="slds-m-around_xx-large">
<lightning:dualListbox aura:id="selectGenre"
name="Genre"
label="Select Genre"
sourceLabel="Available Genre"
selectedLabel="Selected Genre"
options="{!v.GenreList }"
value="{!v.selectedGenreList}"
onchange="{!c.handleGenreChange}"/>
<lightning:button variant="brand" label="Get Selected Genre" onclick="{!c.getSelectedGenre}" />
</div>
</aura:component>
Lightning Component JS Controller:
({
doInit: function(component, event, helper) {
var action = component.get("c.getPiklistValues");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS"){
var result = response.getReturnValue();
var plValues = [];
for (var i = 0; i < result.length; i++) {
plValues.push({
label: result[i],
value: result[i]
});
}
component.set("v.GenreList", plValues);
}
});
$A.enqueueAction(action);
},
handleGenreChange: function (component, event, helper) {
//Get the Selected values
var selectedValues = event.getParam("value");
//Update the Selected Values
component.set("v.selectedGenreList", selectedValues);
},
getSelectedGenre : function(component, event, helper){
//Get selected Genre List on button click
var selectedValues = component.get("v.selectedGenreList");
console.log('Selectd Genre-' + selectedValues);
}
})
Output:
Total views : 1106234