Custom Multi-User Selection in Visualforce

The idea behind our component is to store a map of the user Ids and the names of the user as you’d want to show the names of the users in the selection but would probably need the user Ids.

We prefer to base all of our Visualforce components on native Visualforce and Apex rather than Javascript. It’s then just easier to test our functionality without using automated UI tests such as Selenium tests. The disadvantage of using native Visualforce rather than Javascript is a bit slower feature since every button click the user will do would require a request to be sent to Salesforce.

<code class="rainbow" data-language="java">public class UsersSelectionController { public List<string> selectedUserIds { get; set; } public List<string> removedUserIds { get; set; } public String whereClause { get; set; } private Map<id, string=""> availableUsersMap; private Map<id, string=""> selectedUsersMap; public UsersSelectionController() { initializeCollections(); getUsers(); } private void initializeCollections() { selectedUserIds = new List<string>(); removedUserIds = new List<string>(); availableUsersMap = new Map<id, string="">(); selectedUsersMap = new Map<id, string="">(); } private void getUsers() { for (User u : [SELECT id, name FROM user WHERE IsActive = true]) { availableUsersMap.put(u.Id, u.Name); } } }</id,></id,></string></string></id,></id,></string></string></code>

We then add 2 methods to add and remove a user. When add is called, we’re looking at which users were selected in the available user's multi picklist. When remove is called, we’re looking for which users were selected in the selected user's multi picklist.

<code class="rainbow" data-language="java">public void add() { if (!selectedUserIds.isEmpty()) { for (String userId : selectedUserIds) { selectedUsersMap.put(userId, availableUsersMap.get(userId)); availableUsersMap.remove(userId); } } } public void remove() { if (!removedUserIds.isEmpty()) { for (String userId : removedUserIds) { availableUsersMap.put(userId, selectedUsersMap.get(userId)); selectedUsersMap.remove(userId); } } }</code>

Another important part is to add 2 getter methods that return a list of 'SelectOption' for each of the multi picklists.

<code class="rainbow" data-language="java">public List<SelectOption> getAvailableUsers() { List<SelectOption> availableUsers = new List<selectoption></selectoption>(); for (Id userId : availableUsersMap.keySet()) { availableUsers.add(new SelectOption(userId, availableUsersMap.get(userId))); } return availableUsers; } public List<SelectOption> getSelectedUsers() { List<SelectOption> selectedUsers = new List<selectoption></selectoption>(); for (String userId : selectedUsersMap.keySet()) { selectedUsers.add(new SelectOption(userId, selectedUsersMap.get(userId))); } return selectedUsers; }</code>

Last, we’ll add another filtering method which will allow the user to filter and search for a specific user within the available users's list.

<code class="rainbow" data-language="java">public void filterAvailableOptions() { availableUsersMap = new Map<Id, String>(); selectedUserIds = new List<string></string>(); String likeClause = '%' + whereClause + '%'; for (User u : [SELECT id, name FROM User WHERE name like :likeClause]) { if (!selectedUsersMap.containsKey(u.Id)) { availableUsersMap.put(u.Id, u.Name); } } }</code>

The Visalforce would have 2 multi select lists, 2 buttons to add and remove and a search text input with a search button.

We used an HTML table to layout the table properly. You can then include this in any of your features and use the 'selectedUserIds' list to process the users that were selected.

<code class="rainbow" data-language="html"><apex:page controller="UsersSelectionController"> <apex:form > <apex:outputPanel layout="block"> <apex:outPutLabel value="Search for: "/> <apex:inputText value="{!whereClause}" style=" margin: 10px;"/> <apex:commandButton action="{!filterAvailableOptions}" value="Find" rerender="availableUsersBlock"/> </apex:outputPanel> <apex:outputPanel id="multiselectPanel" layout="block" styleClass="duelingListBox"> <table class="layout"> <tbody> <tr> <td class="selectCell"> <apex:outputPanel layout="block" styleClass="selectTitle"> <apex:outputLabel value="Available Users" for="multiselectPanel:leftList" /> </apex:outputPanel> <apex:selectList id="availableUsersBlock" value="{!selectedUserIds}" multiselect="true" size="15" style="width: 200px;"> <apex:selectOptions value="{!availableUsers}"/> </apex:selectList> </td> <td class="buttonCell"> <apex:outputPanel layout="block" styleClass="text">Add</apex:outputPanel> <apex:outputPanel layout="block" styleClass="text"> <apex:commandLink action="{!add}" rerender="availableUsersBlock, selectedUsersBlock" id="btnRight"> <apex:image value="/s.gif" alt="Add" styleClass="rightArrowIcon" title="Add" /> </apex:commandLink> </apex:outputPanel> <apex:outputPanel layout="block" styleClass="text"> <apex:commandLink action="{!remove}" rerender="availableUsersBlock, selectedUsersBlock" id="btnLeft"> <apex:image value="/s.gif" alt="Remove" styleClass="leftArrowIcon" title="Remove" /> </apex:commandLink> <apex:outputPanel layout="block" styleClass="duelingText">Remove</apex:outputPanel> </apex:outputPanel> </td> <td class="selectCell"> <apex:outputPanel layout="block" styleClass="selectTitle"> <apex:outputLabel value="Selected Users" for="multiselectPanel:rightList" /> </apex:outputPanel> <apex:selectList id="selectedUsersBlock" value="{!removedUserIds}" multiselect="true" size="15" style="width: 200px;"> <apex:selectOptions value="{!selectedUsers}"/> </apex:selectList> </td> </tr> </tbody> </table> </apex:outputPanel> </apex:form> </<span class="su

Feel free to check out the full code with our unit tests in our Github.

Custom Multi-User Selection in Visualforce

Want to talk?