How do I build a multi-select picklist UI in visualforce?

Question

I want to build a visualforce interface that allows me to display a list of available things on the left, and chosen things on the right? This one is hard to explain, so I've made an screen shot, because this is a user interface that salesforce itself uses.

http://i.imgur.com/52pZo.png

Any ideas on how to go about this?

Answer 1

Have you seen this blog post by Pat Patterson?

It should give you exactly what you're looking for.

http://blogs.developerforce.com/developer-relations/2012/06/a-multiselect-picklist-visualforce-component.html

Answer 2

If your field type is Multi-Select then you can just use the apex:inputField tag and you get the Multi-Select functionality for free. I would look at using that first.

For example, in a page that uses a standardController you would have something like:

<apex:inputField value="{!My_Object__c.My_Multi_Select_Field__c}"/>

However, if that is not enough then I'd try using/adapting the component referenced by Mikey. There's also an example in the Visualforce Developer's guide in the section on Dynamic Visualforce Components. While you might not be using Dynamic Visualforce Components, you could still use the general pattern of the multiselect in the example.

Answer 3

The blog post by Pat Patterson is by far the best one around but if you have limitations (can't use Javascript, for instance) then there is an example in the Visualforce documentation that I have used a bit: Using Dynamic References for a User-Customizable Page http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#CSHID=pages_dynamic_vf_components_intro.htm|StartTopic=Content%2Fpages_dynamic_vf_components_intro.htm|SkinName=webhelp Adapt the "Select Fields to Display" PageBlock