How to create multi-picklist in salesforce lightning component

Multi picklist in salesforce lightning component.
There are only four steps to create mullti picklist in salesforce ligthning component.

multi picklist in salesforce lightning component

Step – 1

let’s create a lightning component named “demoMultipicklistCmp.cmp

<aura:component>
<aura:attribute name=”options” type=”list” default=”[]”/>
<aura:attribute name=”selectedOptions” type=”String” default=””/>
<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>
<div class=”slds-form-element”>
<label class=”slds-form-element__label” for=”combobox-unique-id-3″>Search</label>
<div class=”slds-form-element__control”>
<div class=”slds-combobox_container slds-size_small”><!–slds-is-open–>
<div aura:id=”dropdown” onmouseenter=”{!c.openDropdown}” onmouseleave=”{!c.closeDropDown}”    class=”slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-close” aria-expanded=”true” aria-haspopup=”listbox” role=”combobox”>
<div class=”slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right” role=”none”>
<input type=”text” class=”slds-input slds-combobox__input slds-combobox__input-value”
placeholder=”Select an Option” readonly=”true” onfocus=”{!c.openDropdown}” value=”{!v.selectedOptions}”/>
<span class=”slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right” title=”Down icon”>
<lightning:icon iconName=”utility:down” size=”xx-small” class=”slds-icon-text-default”/>
<span class=”slds-assistive-text”>Down icon</span>
</span>
</div>
<div id=”listbox-unique-id” role=”listbox”>
<ul class=”slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid” role=”presentation”>
<aura:iteration items=”{!v.options}” var=”item” indexVar=”ind”>
<li onclick=”{!c.selectOption}” id=”{!item.label+’#BP#’+item.isChecked}” role=”presentation” class=”slds-listbox__item”><!–slds-is-selected–>
<div id=”{!’listbox-option-unique-id-‘+(ind+1)}”
class=”{!item.isChecked==true?’slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center slds-is-selected’:’slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center ‘}” role=”option”>
<span class=”slds-media__figure”>
<lightning:icon iconName=”utility:check” size=”xx-small” class=”slds-listbox__icon-selected”/>
</span>
<span class=”slds-media__body”>
<span class=”slds-truncate” title=”{!item.label}”> {!item.label}</span>
</span>
</div>
</li>
</aura:iteration>
</ul>
</div>
</div>
</div>
</div>
</div>
</aura:component>

Step-2
Javascript Controller Named “demoMultipicklistCmpController.cmp
Use following code to handle open, close and handle dropdown option selection.

({
    doInit:function(component,event,helper){
        var opt =[];
        for(var i=1;i<=5;i++){
            if(i==1){
             	opt.push({label:'Items '+i,isChecked:true});
            }
            else{
             	opt.push({label:'Items '+i,isChecked:false});   
            }
        }
        component.set("v.options",opt);
        helper.selectOptionHelper(component,'Item 1','true');       
    },
    openDropdown:function(component,event,helper){
        $A.util.addClass(component.find('dropdown'),'slds-is-open');
        $A.util.removeClass(component.find('dropdown'),'slds-is-close');
    },
    closeDropDown:function(component,event,helper){
        $A.util.addClass(component.find('dropdown'),'slds-is-close');
        $A.util.removeClass(component.find('dropdown'),'slds-is-open');
    },
    selectOption:function(component,event,helper){        
        var label = event.currentTarget.id.split("#BP#")[0];
        var isCheck = event.currentTarget.id.split("#BP#")[1];
        helper.selectOptionHelper(component,label,isCheck);
    }
})

Step-3
Require a helper named “demoMultipicklistCmpHelper.cmp” to handle dropdown selection

({
    selectOptionHelper : function(component,label,isCheck) {
        var selectedOption='';
		var allOptions = component.get('v.options');
        var count=0;
        for(var i=0;i<allOptions.length;i++){ if(allOptions[i].label==label) { if(isCheck=='true'){ allOptions[i].isChecked = false; }else{ allOptions[i].isChecked = true; } } if(allOptions[i].isChecked){ selectedOption=allOptions[i].label; count++; } } if(count>1){
            selectedOption = count+' items selected';
        }
        component.set("v.selectedOptions",selectedOption);
        component.set('v.options',allOptions);
    }
})

Step-4
Your component is created now you are able to use component in lightning app to test your component. Let’s create a lightning app named “demoMultipicklistApp.app“. app code will be

<aura:application extends=”force:slds”>
<c:demoMultipicklistCmp/>
</aura:application>

In app we are using Salesforce Lightning Design System by extending force:slds

HOw to set options of multi picklist in salesforce lightning component using apex controller

You can set options attribute from apex controller. Create a apex class “Demo_Controller”

public class Demo_Controller{
    @AuraEnabled
    public static List getOptions()
    {
        List optList = new List();
		
	optList.add(new PickListOptions('Option 1',false));
	optList.add(new PickListOptions('Option 2',true));
	optList.add(new PickListOptions('Option 3',false));
	return optList;
    }

	// wrapper class 
	public class PickListOptions
	{
		@AuraEnabled public String label;
		@AuraEnabled public boolean isChecked;
		public PickListOptions(String label,boolean isChecked){
			this.label = label;
			this.isChecked = isChecked;
		}
	}
}

Here using @AuraEnabled annotation that means method become available in lightning. Now update your helper and create a new helper method

getOpetionsHelper: function(component)
{
      	var action = component.get("c.getOptions");
	// set if using parameter in your apex controller action 
	//action.setParams({ paramName : 'paramvalue' });

	// Create a callback that is executed after        
	action.setCallback(this, function(response) {
		var state  = response.getState(); // return SUCCESS,INCOMPLETE or ERROR string
		var result = response.getReturnValue(); // list return by @AuraEnabled getOptions action 
		
		for(var i=0;i<=result.length;i++){            
			opt.push({label:result[i].label,isChecked:result[i].isChecked});
        }
        component.set("v.options",opt);
	});
	
	// $A.enqueueAction adds the server-side action to the queue.
	$A.enqueueAction(action);

} 

Note: your helper and JS controller method name must not equal to @AuraEnabled apex controller action name.

Leave a Reply

Your email address will not be published. Required fields are marked *