Short question: How can I recreate the SelectFitlerElement or dual_select using Visualforce elements and javascript?

Long question: I am trying to improve a Visualforce page that allows you to assign users to a campaign.

Currently, the code I inherited is using several private Salesforce javascript elements. For example a SelectFilterElement. Created like this var dual_select_0Var = new SelectFilterElement(params);

This is not good, since the main.js file where the element is declared clearly states:

 * This code is for Internal Salesforce use only, and subject to change without notice.
 * Customers shouldn't reference this file in any web pages.

It is my task to rebuild these elements. We want the selection to happen just like on the Roles page in Salesforce with an available and selected list that users can be swapped between.

enter image description here

This is always referred to as a dual_select in the component id.

We are currently trying to recreate that functionality using two standard selectList apex elements, two standard commandButton for the arrows, and Javascript to push the names back and forth.

I am a Visualforce, Apex rookie and it is much more difficult than anticipated. No problem with a bit o hard work, but I figure someone probably knows a better way to do this. I have googled, and searched the salesforce forums, and this site a lot, no dice.

Is there an easier way to recreate the SelectFitlerElement or dual_select using Visualforce elements and javascript?


2 Answers 2


Creating something like this yourself does take a considerable amount of time, and requires a considerable amount of knowledge.

Bad analogy, but it's like asking "how can I recreate one of these shiny cars that I see on the streets?". It just takes quite some study and quite some time.

So what I'd suggest is either

  1. Learn Javascript and HTML/CSS, then Visualforce and Apex, and build it yourselves. The route to go in my opinion would be to do that in a gamified way, using http://www.codecademy.com/en/tracks/javascript and http://www.codecademy.com/en/tracks/htmlcss for Javascript and HTML/CSS respectively, and then follow https://developer.salesforce.com/trailhead for learning Visualforce, Apex etc.
  2. Use an existing solution, for example the mentioned https://github.com/metadaddy-sfdc/Visualforce-Multiselect-Picklist. The instructions are pretty clear as well, so you should be able to work it out.
  3. Ask/pay somebody to do it. There's plenty of partners that might be willing do build it themselves, or implement/tweak one of the above solutions.

Does that help?

  • I am a programmer, I was trying to avoid building it myself because I figured someone already had. We ended up going with github.com/metadaddy-sfdc/Visualforce-Multiselect-Picklist. I couldn't pay someone to do it because my company was paying me to do that. :) May 6, 2015 at 16:21
  • :-) Good! If the answer helped any, you could upvote and/or accept it, or answer you own question maybe, then we can 'solve' this question :-) May 6, 2015 at 19:24

We ended up using:


Not sure who build that, because it is copyright Salesforce, but it comes from one of their devs, but the license allows you to use it and it works just fine.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .