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
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
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
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
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
: SLDS Dueling Picklist
<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
Please try the below code:
*****************VF PAGES ************************
if you found this answer helpful then please mark it as best answer so it can help others.
Thanks
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
Thanks