Custom Multi-Select picklist field in Visualforce

There are several scenarios, where in we might have used input field for getting multi-select picklist field. What if you can’t really use an input field, here is the example code which will solve these type of problems.

Mutli-Select

Page Code:

<apex:page controller="multiselect">
    <apex:form >
        <apex:panelGrid columns="3" id="abcd">
            <apex:selectList id="sel1" value="{!leftselected}" multiselect="true" style="width:100px" size="5">
                <apex:selectOptions value="{!unselectedvalues}" />
            </apex:selectList>
                <apex:panelGroup >
                    <br/>
                    <apex:image value="{!$Resource.multiselected}">
                        <apex:actionSupport event="onclick" action="{!selectclick}" reRender="abcd"/>
                    </apex:image>
                    <br/><br/>
                    <apex:image value="{!$Resource.multiunselected}">
                        <apex:actionSupport event="onclick" action="{!unselectclick}" reRender="abcd"/>
                    </apex:image>
                </apex:panelGroup>
            <apex:selectList id="sel2" value="{!rightselected}" multiselect="true" style="width:100px" size="5">
                <apex:selectOptions value="{!SelectedValues}" />
            </apex:selectList>
        </apex:panelGrid>
    </apex:form>
</apex:page>

Controller Code:

public class multiselect {

    Set<String> originalvalues = new Set<String>{'A','B','C','D','E','F','G'};
    Public List<string> leftselected{get;set;}
    Public List<string> rightselected{get;set;}
    Set<string> leftvalues = new Set<string>();
    Set<string> rightvalues = new Set<string>();
    
    public multiselect(){
        leftselected = new List<String>();
        rightselected = new List<String>();
        leftvalues.addAll(originalValues);
    }
    
    public PageReference selectclick(){
        rightselected.clear();
        for(String s : leftselected){
            leftvalues.remove(s);
            rightvalues.add(s);
        }
        return null;
    }
    
    public PageReference unselectclick(){
        leftselected.clear();
        for(String s : rightselected){
            rightvalues.remove(s);
            leftvalues.add(s);
        }
        return null;
    }

    public List<SelectOption> getunSelectedValues(){
        List<SelectOption> options = new List<SelectOption>();
        List<string> tempList = new List<String>();
        tempList.addAll(leftvalues);
        tempList.sort();
        for(string s : tempList)
            options.add(new SelectOption(s,s));
        return options;
    }

    public List<SelectOption> getSelectedValues(){
        List<SelectOption> options1 = new List<SelectOption>();
        List<string> tempList = new List<String>();
        tempList.addAll(rightvalues);
        tempList.sort();
        for(String s : tempList)
            options1.add(new SelectOption(s,s));
        return options1;
    }
}

Happy Coding and enjoy the custom multi-select picklist field

Note: This code can be further optimized 🙂

Links to the images:
multiselected
multiunselected

Advertisements
This entry was posted in Apex, Salesforce Tips & Tricks, Visualforce. Bookmark the permalink.

17 Responses to Custom Multi-Select picklist field in Visualforce

  1. Alex says:

    Hi
    This is exactly what I was looking for
    Hard to find but thanks
    It will accelerate my development
    Regards

  2. palak agarwal says:

    Hi can you please tell me how to reorder the picklist options. List move up and move down option.

    • Srini says:

      I haven’t done this, here is what I have in my top of head… you can have a index column in your list and then based upon the user selections you can re-order these columns

      • palak agarwal says:

        Hi Srini,

        Thanks for your suggestion. It really helped me out.

        With Regards,
        Palak Agarwal

  3. Alex Roth says:

    Hey,

    This is great!…except I can’t get the buttons to actually do anything. When I press the arrow images there appears to be no action happening, despite having cut and paste this exactly into my own page/class. It appears as if onclick is not registering my mouse click, maybe its a chrome thing??

    Any help would be appreciated.

    Thanks a lot –

  4. Srini says:

    Did you stored these button images in the static resources? If yes it should work, there should not be any issue with this. If you are still having any issues then post your final code here

  5. Anuraag Das says:

    Srini,

    Is there any way to preserver the order that the items are added to the right list? And, have you by chance made a snippet that can sort the items?

    Thanks!

    • Srini says:

      Unfortunately I don’t have it Anuraag, however you can sort them and add it or else you can keep them in a temporary list to protect the order.

      • Anuraag Das says:

        What exactly causes the list to be sorted? At one point, I commented out the .sort() commands in two of the functions; however, this didn’t change much. Do Sets and Lists inherently sort the objects they contain?

      • Anuraag Das says:

        Furthermore, say I have highlighted an option in the picklist to the left. I want a string I have to print out that highlighted value. Is this possible?

      • Anuraag Das says:

        Sorry for the flurry of responses, Srini, but could you elaborate on what rightselected, leftselected, leftvalues, and rightvalues are?

  6. Narasimha says:

    Nice Example

  7. Pingback: multi-select box using Model List or List | Wen's Salesforce Blog

  8. sai says:

    Nice help for Beginners !!!

  9. bremmi says:

    how do i retrieve the list of records from custome object to visual force page when certain criteria matched(from picklist select option)

  10. Geecel says:

    great. however im looking for a multi-select with custom picklist in a custom object. this one was for hardcoded right? thanks

  11. Aliza says:

    Hi SO I have a multiselect picklist on VF page
    everything is goog all i need is to hide some values from picklist when a value from another picklist has selected
    So there are two picklist
    A has categories
    B has values for all those categories in one picklist
    need to select multiple values from multiple categories
    category is only for display nothing else
    now i need to show certain values depending upon the category selected
    from picklist B
    any help will be great

    Identity Verification(category)
    Did not provide identity documents
    Incorrect customer phone number
    Couldn’t reach CX after multi attempts
    Could not verify stated address

    Income Verification(category)
    Did not provide income documents
    Could not verify income (Microbilt)
    Could not verify stated income

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s