Multiselect Picklists for User Search and Selection using Apex and Visualforce

9 Dec

Below is a component that will allow you to search and select Users. It was created to mimic the experience of selecting multiple users in the Task creation window. However, it would be easy to change the reference from the User object to almost any other object.

An initial list of selected users can be assigned by passing an Id list in the component attribute aInitialRightList. The list referenced in the aCurrentRightList attribute will be updated anytime entries in the right multiselect picklist change. The aWidth attribute accepts px or %, and it sets the width of the entire component.

I’d like to thank those who posted sample code that helped me with the multiselect picklist component. I borrowed ideas and code from the following:
Custom Multi-Select picklist field in Visualforce
A Multiselect Picklist Visualforce Component

Multi Select Picklist Visualforce Component Example

UserMultiSelectComponent.component


  
  
  
  
  
    
 
  
    
      
Search:  
{!aLeftLabel} {!aRightLabel}


UserMultiSelectComponentController.cls

public with sharing class UserMultiSelectComponentController {
  public static final String USERTYPE_STD = 'Standard';
  public list InitialRightList {get;set;}
  public list CurrentRightList {get;set;}
  public String SearchText {get;set;}
  public list LeftSelectedList {get;set;}
  public list RightSelectedList {get;set;}
  map LeftOptionMap = new map();
  map RightOptionMap = new map();
  
  /****
  * Controller - instantiate lists 
  ****/
  public UserMultiSelectComponentController() {
    LeftSelectedList = new list();
    RightSelectedList = new list();
  }
  
  /****
  * ClickRight - Right pointing arrow was clicked. Move selected options to the right box.
  ****/
  public PageReference ClickRight(){
    RightSelectedList.clear();
    for(String s : LeftSelectedList){
      if (LeftOptionMap.containsKey(s)) {
        RightOptionMap.put(s, LeftOptionMap.get(s));        
      }
      LeftOptionMap.remove(s);
    }
    return null;
  }

  /****
  * ClickLeft - Left pointing arrow was clicked. Move selected options to the left box.
  ****/     
  public PageReference ClickLeft(){
    LeftSelectedList.clear();
    for(String s : RightSelectedList){
      if (RightOptionMap.containsKey(s)) {
        LeftOptionMap.put(s, RightOptionMap.get(s));        
      }
      RightOptionMap.remove(s);
    }
    return null;
  }

  /****
  * getLeftOptionList - return SelectOptions for the left/unselected box
  ****/      
  public list getLeftOptionList(){
    list TempOptionList = new list();
    list TempValueList; 
  
    TempValueList = LeftOptionMap.values();
    TempValueList.sort();  // sort by name
    for (User u : TempValueList) { 
      TempOptionList.add(new SelectOption(u.Id, u.Name));
    }
    return TempOptionList;
  }

  /****
  * getRightOptionList - return SelectOptions for the right/selected box
  ****/ 
  public list getRightOptionList(){
    list TempOptionList = new list();
    list TempValueList;
    list UserList;

    //clear is used instead of new list, so the list maintains the pointer to the ExamplePageController list
    CurrentRightList.clear();  
    
    // load initially selected records into the right box 
    if (InitialRightList != null && InitialRightList.size() > 0) {
      UserList = [Select Name, Id, IsActive, UserType From User where IsActive=true and UserType = :USERTYPE_STD and Id IN :InitialRightList limit 500];
      for (User u : UserList) {
        RightOptionMap.put(u.Id, u);
      }
      InitialRightList.clear();
    }
    
    TempValueList = RightOptionMap.values();
    TempValueList.sort();  // sort by name
    for (User u : TempValueList) { 
      TempOptionList.add(new SelectOption(u.Id, U.Name));
      CurrentRightList.add(u.Id);
    }   
    return TempOptionList;
  }

  /****
  * Find - Search for user records by name, and add them to the left box
  ****/ 
  public PageReference Find(){
    String TempSearchText;
    list UserList;
    
    TempSearchText = '%' + SearchText + '%';
    UserList = [Select Name, Id, IsActive, UserType From User where IsActive=true and UserType = :USERTYPE_STD and Name like :TempSearchText limit 500];
    
    LeftOptionMap.clear();
    for (User u : UserList) {
      if (!RightOptionMap.containsKey(u.Id)) {
        LeftOptionMap.put(u.Id, u);
      }
    }
    
    return null;
  }
}

ExamplePage.page


  
    
      
    
    
    
      
        

ExamplePageController.cls

public with sharing class ExamplePageController {
  public list InitialList  {get;set;}
  public list CurrentList  {get;set;}

  public ExamplePageController() { 
    InitialList = new list();
    InitialList.add(UserInfo.getUserId());
    CurrentList = new list();
  }
}

UserMultiSelectComponentControllerTest.cls

@isTest
private class TestUserMultiSelectComponentController {
  static testMethod void TestUserMultiSelect() {
    list TempOptionList;
    list UserList;
    UserMultiSelectComponentController UMSCcontroller = new UserMultiSelectComponentController();
        
    // set initial user
    UserList = [Select Name, Id, IsActive, UserType From User where IsActive=true and UserType = :UserMultiSelectComponentController.USERTYPE_STD limit 1];
        
    system.Test.startTest(); 
        
    // instantiate lists that would be passed in
    UMSCcontroller.InitialRightList = new list();
    UMSCcontroller.CurrentRightList = new list();
       
    // initial list item should show in right list, left should be empty
    UMSCcontroller.InitialRightList.add(UserList[0].Id);
    TempOptionList = UMSCcontroller.getLeftOptionList();
    system.assertEquals(0, TempOptionList.size());
    TempOptionList = UMSCcontroller.getRightOptionList();
    system.assertEquals(UserList[0].Id, TempOptionList[0].getValue());  // returned option list
    system.assertEquals(UserList[0].Id, UMSCcontroller.CurrentRightList[0]);  // current right list
        
    // run find method, this will add entries to the left LeftOptionMap that get put into a list in getLeftOptionList
    UMSCcontroller.SearchText = '';  // so search text is not null
    UMSCcontroller.Find(); // assumes there are 2 or more standard users
    TempOptionList = UMSCcontroller.getLeftOptionList();
    system.assertNotEquals(0, TempOptionList.size());  //not 0
     
    // Select entry to move to right box
    UMSCcontroller.LeftSelectedList.add(TempOptionList[0].getValue());
    UMSCcontroller.ClickRight();
    TempOptionList = UMSCcontroller.getRightOptionList();  // update CurrentRightList with 2 selected ids
    system.assertEquals(2, UMSCcontroller.CurrentRightList.size()); 
       
    // Select entry to move to left box
    UMSCcontroller.RightSelectedList.add(UserList[0].Id);
    UMSCcontroller.ClickLeft();
    TempOptionList = UMSCcontroller.getRightOptionList();  // update CurrentRightList with 1 selected ids
    system.assertEquals(1, UMSCcontroller.CurrentRightList.size());
    system.assertEquals(TempOptionList[0].getValue(), UMSCcontroller.CurrentRightList[0]);
     
    system.Test.stopTest();
  }
}

One Reply to “Multiselect Picklists for User Search and Selection using Apex and Visualforce”

  1. Awesome, thanks! We are creating a “stakeholders” relationship, connecting user(s) to product(s). This is a great UI for picking up the users.

    The sample code worked perfectly.

Comments are closed.