Recreate the Salesforce Multi-Picklist Element

Question

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.

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?

Answer 1

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?

Answer 2

We ended up using:

https://github.com/metadaddy-sfdc/Visualforce-Multiselect-Picklist

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.