function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
❤Code❤Code 

How to create multi select picklist in vf page using slds

Can anyone provide some idea or approach on how to create a multiselect picklist like below pic.User-added image

Regards
Rowallim TechnologyRowallim Technology
Hi Code
 If you want to create multiselect picklist field then there is a standard field type in salesforse i.e. "Picklist (Multi-Select)". And if you want to create in visualforce page then use this "  <apex:selectList value="{!xyz}" multiselect="true" size="1">  ".

hope it will help you resolve your problem.
Please mark it best answer if it helps.
Thanks
rsfdcrsfdc
Hi  ❤Code,
Were you able to figure out? I am working on similar need and thinking to construct base slds html code using apex:repeat over picklist options for multiple fields. Before I go down that rabbit hole, I'd appreciate elegant way to do this.
Thanks
@@@we@@@@@@we@@@
<div class="slds-form-element" role="group" aria-labelledby="picklist-group-label"> <div id="picklist-group-label" class="slds-form-element__label slds-form-element__legend slds-text-title_caps">Select Options</div> <div class="slds-dueling-list"> <div class="slds-assistive-text" id="drag-live-region" aria-live="assertive"></div> <div class="slds-assistive-text" id="option-drag-label">Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.</div> <div class="slds-dueling-list__column"> <span class="slds-form-element__label" id="label-83">First Category</span> <div class="slds-dueling-list__options"> <ul aria-describedby="option-drag-label" aria-labelledby="label-83" aria-multiselectable="true" class="slds-listbox slds-listbox_vertical" role="listbox"> <li role="presentation" class="slds-listbox__item"> <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="0"> <span class="slds-media__body"> <span class="slds-truncate" title="Option 1">Option 1</span> </span> </div> </li> <li role="presentation" class="slds-listbox__item"> <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="-1"> <span class="slds-media__body"> <span class="slds-truncate" title="Option 2">Option 2</span> </span> </div> </li> <li role="presentation" class="slds-listbox__item"> <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="-1"> <span class="slds-media__body"> <span class="slds-truncate" title="Option 3">Option 3</span> </span> </div> </li> <li role="presentation" class="slds-listbox__item"> <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="-1"> <span class="slds-media__body"> <span class="slds-truncate" title="Option 6">Option 6</span> </span> </div> </li> </ul> </div> </div> <div class="slds-dueling-list__column"> <button class="slds-button slds-button_icon slds-button_icon-container" title="Move Selection to Second Category"> <svg class="slds-button__icon" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right"></use> </svg> <span class="slds-assistive-text">Move Selection to Second Category</span> </button> <button class="slds-button slds-button_icon slds-button_icon-container" title="Move Selection to First Category"> <svg class="slds-button__icon" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left"></use> </svg> <span class="slds-assistive-text">Move Selection to First Category</span> </button> </div> <div class="slds-dueling-list__column"> <span class="slds-form-element__label" id="label-84">Second Category</span> <div class="slds-dueling-list__options"> <ul aria-describedby="option-drag-label" aria-labelledby="label-84" aria-multiselectable="true" class="slds-listbox slds-listbox_vertical" role="listbox"> <li role="presentation" class="slds-listbox__item"> <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="0"> <span class="slds-media__body"> <span class="slds-truncate" title="Option 4">Option 4</span> </span> </div> </li> <li role="presentation" class="slds-listbox__item"> <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="-1"> <span class="slds-media__body"> <span class="slds-truncate" title="Option 5">Option 5</span> </span> </div> </li> </ul> </div> </div> <div class="slds-dueling-list__column"> <button class="slds-button slds-button_icon slds-button_icon-container" title="Move Selection Up"> <svg class="slds-button__icon" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#up"></use> </svg> <span class="slds-assistive-text">Move Selection Up</span> </button> <button class="slds-button slds-button_icon slds-button_icon-container" title="Move Selection Down"> <svg class="slds-button__icon" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use> </svg> <span class="slds-assistive-text">Move Selection Down</span> </button> </div> </div> </div>



: SLDS Dueling Picklist




 
@@@we@@@@@@we@@@
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html ng-app="SLDSApp" ng-controller="myCtrl" xmlns="SVG namespace" xmlns:xlink="XLink namespace">
<head>
<script src="{!$Resource.jQuery}"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js">
</script>
<apex:stylesheet value="{!URLFOR($Resource.SLDS0122, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<style>
.active{
background-color:#F0FFFF;
}
</style>
</head>
<body>
<div class="slds">
<div class="slds-picklist--draggable slds-grid">
<div class="slds-form-element">
<span class="slds-form-element__label" aria-label="select-1">Multi Pick List</span>
<div class="slds-picklist slds-picklist--multi">
<ul ui-sortable="sortableOptions" ng-model="selectedValues" class="picklist slds-picklist__options slds-picklist__options--multi shown">
<div ng-repeat="item in selectedValues" class="app" ng-class="{active: isActive(item)}">
<li id="po-0-0" class="slds-picklist__item" aria-selected="false" tabindex="0" role="option" ng-click="add($index);select(item)" ng-dblclick="add($index);addToDisplayArray();select(null)" >
<span class="slds-truncate">
<span>{{item}}</span>
</span>
</li>
</div>
</ul>
</div>
</div>
<div class="slds-grid slds-grid--vertical">
<button class="slds-button slds-button--icon-container">
<svg aria-hidden="true" class="slds-button__icon" ng-click="deleteFromDisplayArray();select(null)">
<use xlink:href="{!URLFOR($Resource.SLDS0122, 'assets/icons/utility-sprite/svg/symbols.svg#left')}" ></use>
</svg>
<span class="slds-assistive-text" >Arrow left</span>
</button>
<button class="slds-button slds-button--icon-container">
<svg aria-hidden="true" class="slds-button__icon" ng-click="addToDisplayArray();select(null)">
<use xlink:href="{!URLFOR($Resource.SLDS0122, 'assets/icons/utility-sprite/svg/symbols.svg#right')}" ></use>
</svg>
<span class="slds-assistive-text" >Arrow right</span>
</button>
</div>
<div class="slds-form-element">
<span class="slds-form-element__label" aria-label="select-2">Resultant Values</span>
<div class="slds-picklist slds-picklist--multi" >
<ul ui-sortable="sortableOptions" ng-model="displayArray" class="picklist slds-picklist__options slds-picklist__options--multi shown">
<div ng-repeat="item in displayArray" class="app" ng-class="{active: isActive(item)}">
<li id="po-0-0" class="slds-picklist__item" aria-selected="false" tabindex="0" role="option" ng-click="delete($index);select(item)" ng-dblclick="delete($index);deleteFromDisplayArray();select(null)">
<span class="slds-truncate">
<span class="items" >{{item}}</span>
</span>
</li>
</div>
</ul>
</div>
</div>
<div class="slds-grid slds-grid--vertical">
<button class="slds-button slds-button--icon-container" ng-click="up();select(null)">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="{!URLFOR($Resource.SLDS0122, 'assets/icons/utility-sprite/svg/symbols.svg#up')}"></use>
</svg>
<span class="slds-assistive-text" >Arrow up</span>
</button>
<button class="slds-button slds-button--icon-container" ng-click="down();select(null)">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="{!URLFOR($Resource.SLDS0122, 'assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
</svg>
<span class="slds-assistive-text" >Arrow down</span>
</button>
</div>
</div>
</div>
</body>
</html>
<script>
var app = angular.module('SLDSApp', ['ui.sortable']);
app.controller('myCtrl', ['$scope', function($scope) {
$scope.displayArray = [];
var deleted = null;
var selected = '';
var s = '';
var d = null;
var countForUp = null;
var countForDown = null;
var countForAdd = null;
var countForDelete = null;
$scope.selectedValues = ['Option One', 'Option Two', 'Option Three', 'Option Four', 'Option Five', 'Option Six', 'Option Seven', 'Option Eight'];
$scope.sortableOptions = {
update: function(e, ui) {
},
receive: function(e, ui) {
},
connectWith: ".picklist"
};
$scope.add = function(val) {
countForAdd = 1;
selected = $scope.selectedValues[val];
d = val;
}
$scope.addToDisplayArray = function() {
if(countForAdd == 1) {
$scope.displayArray.push(selected);
$scope.selectedValues.splice(d, 1);
selected = '';
d=null;
countForAdd--;
}
}
$scope.delete = function(val) {
countForUp = 1;
countForDown = 1;
countForDelete = 1;
s = $scope.displayArray[val];
deleted = val;
}
$scope.deleteFromDisplayArray = function() {
if(countForDelete == 1) {
$scope.displayArray.splice(deleted, 1);
$scope.selectedValues.push(s);
s = '';
deleted=null;
countForUp--;
countForDown--;
countForDelete--;
}
}
$scope.up = function() {
if(countForUp ==1) {
if(deleted!=0) {
var temp = $scope.displayArray[deleted];
$scope.displayArray[deleted] = $scope.displayArray[deleted-1];
$scope.displayArray[deleted-1] = temp;
}
}
countForDelete = null;
countForUp = null;
}
$scope.down = function() {
if(countForDown ==1) {
if(deleted!=($scope.displayArray.length-1)) {
var temp = $scope.displayArray[deleted];
$scope.displayArray[deleted] = $scope.displayArray[deleted+1];
$scope.displayArray[deleted+1] = temp;
}
}
countForDelete = null;
countForDown = null;
}
$scope.select= function(item) {
$scope.selectedVal = item;
}
$scope.isActive = function(item) {
return $scope.selectedVal === item;
}
}]);
</script>
</apex:page>


please mark best ANSWER
Akshay_DhimanAkshay_Dhiman
Hi Code,

Please try the below code:


*****************VF PAGES ************************
<apex:page controller="SelectOptionController">
 <apex:form > 
   <apex:commandbutton value="Show Values" action="{!show}"/>
   
   <apex:pageBlock >    
    <apex:outputLabel > Countries : </apex:outputLabel>
    <apex:selectList size="1" value="{!selectedCountry}">
      <apex:selectOptions value="{!countrieLst }"/>
    </apex:selectList> <br/>
    
    <apex:outputLabel > Gender : </apex:outputLabel>
    <apex:selectRadio value="{!selectedGender}"> 
     <apex:selectOptions value="{!genderLst}"/>
    </apex:selectRadio>  
    
     <apex:outputLabel > Hobbies :</apex:outputLabel>
    <apex:selectList size="1" value="{!selectedHobby}">
     <apex:selectOption itemLabel="--None--" itemvalue=""></apex:selectOption>
     <apex:selectOption itemLabel="Swimming" itemvalue="Swimming"></apex:selectOption>
     <apex:selectOption itemLabel="Reading" itemvalue="Reading"></apex:selectOption>
     <apex:selectOption itemLabel="Cricket" itemvalue="Cricket"></apex:selectOption>
    </apex:selectList>     
    </apex:pageBlock> 
   
   <apex:pageBlock title="selected values">
    <apex:outputText value="{!selectedValues}" style="color:red"/>   
   </apex:pageBlock>
 </apex:form>

</apex:page>

*************************** Controller *******************************

public class SelectOptionController {
 public List<SelectOption> countrieLst {get;set;}
 public List<SelectOption> hobbiesLst {get;set;}
 public List<SelectOption> genderLst {get;set;}

 public String selectedCountry{get;set;}
 public String selectedHobby {get;set;}
 public String selectedGender {get;set;}
 public String selectedValues {get;set;}


 public SelectOptionController(){
  countrieLst = new List<SelectOption>();
  hobbiesLst = new List<SelectOption>();
  genderLst = new List<SelectOption>();
  
  countrieLst.add(new SelectOption('','--None--'));
  countrieLst.add(new SelectOption('India','India'));
  countrieLst.add(new SelectOption('China','China'));
  countrieLst.add(new SelectOption('US','US'));
  
  /* preparing picklist values in VF page.
  hobbiesLst.add(new SelectOption('','--None--'));
  hobbiesLst.add(new SelectOption('Swimming','Swimming'));
  hobbiesLst.add(new SelectOption('Reading','Reading'));
  hobbiesLst.add(new SelectOption('Cricket','Cricket'));
  */

  genderLst.add(new SelectOption('Male','Male'));
  genderLst.add(new SelectOption('Female','Female'));
   
 }

 public pageReference show(){
  selectedValues = 'Selected country:'+selectedCountry +'-->Selected Hobbies:'+selectedHobby+' Gender: -->'+selectedGender;
  return null;

    }
}

 if you found this answer helpful then please mark it as best answer so it can help others.   
  
  Thanks 
  Akshay
lkatneylkatney
Hi @@we@@ / Akshay,

Try to add this code on this new tool Playground.  This will give a clear picture of how this code works & will give an easiest way to deploy/test your solution as well.

Thanks
Lakshay - Playground

Playground is a Salesforce online community to share solutions free of cost that can be used by anyone & with one click deploy technology, it gives hassle-free experience to test these solutions quickly. Check this out at https://playg.app to see existing/upload your solutions
lkatneylkatney
Link to Playground (https://playg.app)

Thanks