We recently came across a problem, we have to develop a multi-row/multiselect picklist that looks similar in both desktop and iPad browser.

We could have easily used the usual Visualforce tag i.e. <apex:selectList …/> for the purpose, like this

<apex:selectList id="contactPickList" value="{!selectedContactIds}"  multiselect="true" size="4">
   <apex:selectOptions value="{!contactOptions}"/>
 </apex:selectList>

But iPad doesn’t supports “size” attribute on HTML <select> tag, and to save real state on page it always shows picklists in one line. Picklist options are shown in popup on click.

We are troubled by this difference, as the UI was looking very different in iPad and desktop. You can assume that we are developing UI having Salesforce “Customize you tabs” type interface, here is the difference

iPad view of “Customize my tabs”

desktop view of “Customize my tabs”

Desired Solution

We need a UI component, with few core requirements.

1. It should be pluggable to any visualforce multiselect pick list with minimal lines of javascript code.

2. It should work on top of existing visualforce goodness i.e. <apex:SelectList /> tag. Developer should create a normal apex multi select list, the plugin will not add any complexity to that.

3. It should optionally support searching within the list, because selecting few items among thousands is not friendly in HTML pick lists.

4. It should give clear idea, what items are selected on both desktop and iPad. Our specific requirement was to design something to show a “customize my tabs” like split view for “Available” and “Selected” items.

Solution

A jQuery plugin was developed named “twinBoxMultiSelectList” was created. This plugin transforms any HTML select list to a two box “Customize my tabs” style interface. This plugin works on top of CSS selector for a HTML select list and requires only few inputs to render i.e.

• availableList : CSS selector of DIV/SPAN/TD etc, where the Available items list should be drawn.

• selectedList : CSS selector of DIV/SPAN/TD etc, where the Selected items list should be drawn.

• searchBox : CSS selector of input text box, this will be used for feeding the search text. This is OPTIONAL.

• styles : OPTIONAL CSS styles to change look and feel of the component.

Here is a quick demo video of this plugin

Here is another video that shows how to configure this plugin

Trying this out

If you want to try it on your desktop, iPad or Android tablet. Please feel free to do it from here : http://tgerm-developer-edition.na14.force.com/twinBoxMultiSelectListDemo

Here is the link to gist, to create resources for plugin includes : https://gist.github.com/1553837

Here is the gist full source code of demo visualforce page : https://gist.github.com/1620745, code snippets embedded below for reference

Visualforce Page

Apex Controller

Your views ?

Looking forward to those 🙂