Another Salesforce blog!!!

Salesforce, Apex

Creating MultiSelect with Search button


VisualForce Page

<apex:component controller="AlarmRule_MultiSelect_Comp_Contr">
 
<style>
.myspacingtable {
border-collapse: separate;
border-spacing: 10px;
}
</style>
 
  <apex:attribute name="aLeftLabel" description="Label on left listbox." type="String" required="true" />
  <apex:attribute name="aRightLabel" description="Label on right listbox." type="String" required="true" />
  <apex:attribute name="aSize" description="Size of listboxes." type="Integer" required="true" />
  <apex:attribute name="aWidth" description="Width of listboxes." type="String" required="true" />
  <apex:attribute name="aInitialRightList" description="Initial record Ids in right box." type="String[]" required="false" assignTo="{!InitialRightList}" />
  <apex:attribute name="aCurrentRightList" description="Current record Ids in right box." type="String[]" required="true" assignTo="{!CurrentRightList}" />  
 
 
   
  <apex:actionRegion >
    <apex:outputPanel id="BoxPanel">
      <table class="myspacingtable" style="width: {!aWidth}">
                        
        <tr>
          <td style="width:5%;position: relative; top:3px;" ><span >Search:</span></td>
          <td style="width: 20%;"><apex:inputText value="{!SearchText}" /></td>
          <td style="width: 1%;padding-right:3px !important;position: relative; top:3px;"> By </td>
          <td style="width: 20%"><apex:selectList value="{!selectedVal}" size="1"><apex:selectOptions value="{!openPresentationOptions}" /> </apex:selectList></td>
          <td>
            <span style="float: left;">&nbsp;</span>
            <apex:actionStatus id="SearchIcon">
              <apex:facet name="start">
                <apex:outputPanel >
                  <apex:commandButton style="float: left;" disabled="true" value="  Find  " />
                  <img style="float: left;" src="/img/loading24.gif" />
                </apex:outputPanel>
              </apex:facet>
              <apex:facet name="stop">
                <apex:outputPanel >
                  <apex:commandButton style="position:relative;top:-3px;" action="{!Find}" value="  Find  " rerender="BoxPanel" status="SearchIcon" />
                </apex:outputPanel>
              </apex:facet>
            </apex:actionStatus>    
           <span style="padding-left:5px;" title="Search the text by providing or click to find all"><img style="relative; top:-3px;" src="http://png-3.findicons.com/files/icons/1156/fugue/16/question_frame.png" /></span>
           </td>
        </tr>
      </table>
 
      <table style="width: {!aWidth}">
        <tr>
          <th style="width:50%" class="selectTitle">{!aLeftLabel}</th>
          <th style="width:30px"></th>
          <th style="width:50%" class="selectTitle">{!aRightLabel}</th>
        </tr>
        <tr>
          <td><apex:selectList value="{!LeftSelectedList}" multiselect="true" style="width:100%" size="{!aSize}">
              <apex:selectOptions value="{!LeftOptionList}" />
            </apex:selectList></td>
 
          <td style="vertical-align: middle;align:center;">
            
            <div>
              <apex:image styleClass="picklistArrowRight" value="/s.gif">
                <apex:actionSupport event="onclick" action="{!ClickRight}" reRender="BoxPanel" />
              </apex:image>
              <br /> <br />
              <apex:image styleClass="picklistArrowLeft" value="/s.gif">
                <apex:actionSupport event="onclick" action="{!ClickLeft}" reRender="BoxPanel" />
              </apex:image>
              <br /> <br />
              <apex:commandButton value="Clear" action="{!clearMe}" rerender="BoxPanel"/> 
            </div>
             
          </td>
 
          <td><apex:selectList value="{!RightSelectedList}" multiselect="true" style="width:100%" size="{!aSize}">
              <apex:selectOptions value="{!RightOptionList}" />
            </apex:selectList></td>
        </tr>
      </table>
    </apex:outputPanel>
  </apex:actionRegion>
</apex:component>

 

Apex Code:

 
public with sharing class AlarmRule_MultiSelect_Comp_Contr {

    public String selectedVal{get;set;}   

    public List<SelectOption> getopenPresentationOptions()
    {        
        
        List<SelectOption> selectOptions = new List<Selectoption>();        
        Set<SelectOption> selectOptionsNoDupes  = new Set<SelectOption>();
                
        List<Asset__c> queryResult = [SELECT id, Make__r.Name,Model__r.Name,Model_Year__c FROM Asset__c]; 

        for(Asset__c obj : queryResult)
        { 
            Make__c make = (Make__c)obj.getSobject('Make__r');
            Model__c model = (Model__c)obj.getSobject('Model__r');            
            
            if(make != null && model !=null)
            {     
              string make_model = make.Name + ' / ' + model.Name + ' / ' + obj.Model_Year__c;
              selectOptionsNoDupes.add(new selectOption(make.Id, make_model)); 
              //optns.add(new selectOption(make.Id, make_model)); 
            }            
        }        
        selectOptions.add(new SelectOption('Select...', 'Select...'));
        selectOptions.addAll(selectOptionsNoDupes);  
        selectedVal = 'Select...';
        return selectOptions;
    }     

  public static final String USERTYPE_STD = 'Standard';
  public list<String> InitialRightList {get;set;}
  public list<String> CurrentRightList {get;set;}
  public String SearchText {get;set;}
  public list<String> LeftSelectedList {get;set;}
  public list<String> RightSelectedList {get;set;}
  map<String, Asset__c> LeftOptionMap = new map<String, Asset__c>();
  map<String, Asset__c> RightOptionMap = new map<String, Asset__c>();
  
  /****
  * Controller - instantiate lists 
  ****/
  public traceIT_AlarmRule_MultiSelect_Comp_Contr() {
    LeftSelectedList = new list<String>();
    RightSelectedList = new list<String>();
  }
  
  /****
  * 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<SelectOption> getLeftOptionList(){
    list<SelectOption> TempOptionList = new list<SelectOption>();
    list<Asset__c> TempValueList; 
  
    TempValueList = LeftOptionMap.values();
    TempValueList.sort();  // sort by name
    for (Asset__c u : TempValueList) { 
      TempOptionList.add(new SelectOption(u.Id, u.Name));
    }
    return TempOptionList;
  }
 
  /****
  * getRightOptionList - return SelectOptions for the right/selected box
  ****/ 
  public list<SelectOption> getRightOptionList(){
    list<SelectOption> TempOptionList = new list<SelectOption>();
    list<Asset__c> TempValueList;
    list<Asset__c> AssetList;
 
    //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) {
      AssetList = [SELECT id,name,Description__c,Asset_Code__c,Make__r.Name,Model__r.Name,Model_Year__c FROM Asset__c WHERE name = :USERTYPE_STD and id IN :InitialRightList limit 500];
      //[Select Name, Id, IsActive, UserType From User where IsActive=true and UserType = :USERTYPE_STD and Id IN :InitialRightList limit 500];
      for (Asset__c u : AssetList) {
        RightOptionMap.put(u.Id, u);
      }
      InitialRightList.clear();
    }
    
    TempValueList = RightOptionMap.values();
    TempValueList.sort();  // sort by name
    for (Asset__c u : TempValueList) { 
      TempOptionList.add(new SelectOption(u.Id, U.Name));
      CurrentRightList.add(u.Id);
    }   
    return TempOptionList;
  }
 
  /****
  * Find - Search for Asset records by name, and add them to the left box
  ****/ 
  public PageReference Find(){
    String TempSearchText;
    list<Asset__c> AssetList;
    
    TempSearchText = '%' + SearchText + '%';
    //AssetList = [Select Name, Id, IsActive, UserType From User where IsActive=true and UserType = :USERTYPE_STD and Name like :TempSearchText limit 500];
    AssetList = [SELECT id,name,Description__c,Asset_Code__c,Make__r.Name,Model__r.Name,Model_Year__c FROM Asset__c WHERE name like :TempSearchText OR  Description__c like :TempSearchText limit 500];
    LeftOptionMap.clear();
    for (Asset__c u : AssetList) {
      if (!RightOptionMap.containsKey(u.Id)) {
        LeftOptionMap.put(u.Id, u);
      }
    }
    
    return null;
  }
  
  public PageReference clearMe() {
        LeftSelectedList.clear();
        RightSelectedList.clear();
        RightOptionMap.clear();
        LeftOptionMap.clear();
        return null;
  }

}
 

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

*