ui:inputSelect component can be used both for Single Selection and Multiple Selection values by setting the attribute “multipe=true” for the multi-selection, by default it is single list selection.

Here, we will replicate how the standard multi-picklist field looks like in the lightning component.

You can view this in action here:

Step 1: Identify the object and multi-select picklist field which need to be shown in component.

Eg: Hobbies__c on the Contact object

Step 2: Create a Class which will fetch the picklist values for the given field of the object. Don’t forget to mark the method as @AuraEnabled


public class MultiSelectPicklistCls {
@AuraEnabled
public static List<String> getPicklistvalues(sObject objName, String field_apiname){
List<String> optionlist = new List<String>();

Schema.sObjectType sobject_type = objName.getSObjectType();
Schema.DescribeSObjectResult sobject_describe = sobject_type.getDescribe();
Map<String, Schema.SObjectField> field_map = sobject_describe.fields.getMap();

List<Schema.PicklistEntry> pick_list_values = field_map.get(field_apiname).getDescribe().getPickListValues();
for (Schema.PicklistEntry a : pick_list_values) {
optionlist.add(a.getValue());
}
return optionlist;
}
}

Step 3: Create a MultiSelectPicklist Component:


<aura:component controller="MultiSelectPicklistCls" implements="forceCommunity:availableForAllPageTypes" access="global">
<aura:attribute name="conRec" type="Contact" default="{'sobjectType': 'Contact'}"/>
<aura:attribute name="addValues" type="String" />
<aura:attribute name="remValues" type="String" />

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<fieldset class="slds-form--compound">
<div class="slds-form-stacked">
<div class="slds-form-element__group">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size--1-of-1">
<ui:inputSelect label="Hobbies: " multiple="true" value="{!v.addValues}"
aura:id="mSelectLeft" class="dynamic oSelect" />
</div>
<div class="slds-form-element slds-size--1-of-1">
<ul>
<ui:button aura:id="btnMove" class="button" label="Move" press="{!c.moveRight}"/>


<ui:button aura:id="btnRemove" class="button" label="Remove" press="{!c.moveLeft}"/></ul>
</div>
<div class="slds-form-element slds-size--1-of-1">
<ui:inputSelect label="Selected Values: " multiple="true" value="{!v.remValues}"
aura:id="mSelectRight" class="oSelect" />
</div>
</div>
</div>
</div></fieldset>
</aura:component>

You can even replace the text (“Move/Remove”) with icons/images as per your requirement.

Note: This multi-select component can be made a generic by including two more attributes:

  1. <aura:attribute name=”objRec” type=”object” required=”true” />
  2. <aura:attribute name=”fAPIName” type=”String” required=”true” />

Using this two attributes the component will be independent of the object and the field

Step 4: Javascript component controller:


({
doInit : function(component, event, helper) {
helper.buildPickValues(component, event, helper);
},
moveRight : function(component, event, helper) {
if(component.get("v.addValues").length > 0){
helper.moveRight(component, event, helper);
} else {
alert("Please select atleast one value");
}

},
moveLeft : function(component, event, helper) {
if(component.get("v.remValues").length > 0){
helper.moveLeft(component, event, helper);
} else {
alert("Please select atleast one value to Move to Left");
}
}
})

Step 5: Javascript Component Helper:


({
buildPickValues : function(component, event, helper) {
var action = component.get("c.getPicklistvalues");
var inputMultiSel = component.find("mSelectLeft");
var opts=[];
action.setParams({
objName : component.get("v.conRec"),
field_apiname : "singhforce__Hobbies__c"
});
action.setCallback(this, function(resp) {
var state=resp.getState();
if(state === "SUCCESS"){
var res = resp.getReturnValue();
for(var i=0;i< res.length;i++){
opts.push({"class": "optionClass",
label: res[i],
value: res[i]});
}
inputMultiSel.set("v.options", opts);
// component.set("v.masterValues", opts);
}
});
$A.enqueueAction(action);
},

moveRight : function(component, event, helper) {
var addSelValues = component.get("v.addValues").split(";");
var leftOpts = [];
var rightOpts = [];

rightOpts = component.find("mSelectRight").get("v.options");
leftOpts = component.find("mSelectLeft").get("v.options");
for(var i=0;i< addSelValues.length;i++){
rightOpts.push({"class": "optionClass",
label: addSelValues[i],
value: addSelValues[i]});
for(var j=0;j< leftOpts.length;j++){
if(leftOpts[j]["value"] == addSelValues[i]){
leftOpts.splice(j,1);
break;
}
}
}
component.find("mSelectRight").set("v.options", rightOpts);
component.find("mSelectLeft").set("v.options", leftOpts);
},
moveLeft : function(component, event, helper) {
var remSelValues = component.get("v.remValues").split(";");
var leftOpts = [];
var rightOpts = [];

rightOpts = component.find("mSelectRight").get("v.options");
leftOpts = component.find("mSelectLeft").get("v.options");
for(var i=0;i< remSelValues.length;i++){
leftOpts.push({"class": "optionClass",
label: remSelValues[i],
value: remSelValues[i]});
for(var j=0;j< rightOpts.length;j++){
if(rightOpts[j]["value"] == remSelValues[i]){
rightOpts.splice(j,1);
break;
}
}
}
component.find("mSelectLeft").set("v.options", leftOpts);
component.find("mSelectRight").set("v.options", rightOpts);
},
})

Please feel free to post your queries/thoughts.

Happy Coding!!!

Advertisements

3 thoughts on “Turn On – Lightning Part 3 (Multi-Select Picklist)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s