Salesforce Drag Drop MultiSelect List Using JQuery

Friday, May 13, 2011 by Aslam - The Alexendra
Hi All,
Recently i came across with one requirement where end user needs a multiselect picklist where he can drag drop items between two list in Salesforce. I searched for some good drag drop scripts over net and finally found best one which fits in my need. It is from thechriswalker.net and you can see that in action here.

So I used that jquery stuff and wrapped that in a re-usable VF component to make it more general. It is very simple to use and easy to embed in you VF page.
In your VF page you simply need to call the VF component as below syntax:

<c:sfdragdroplist list1="India;United States;France;Germany;Japan" outputfieldid="list_2_serialised">

The above syntax will make two list on screen drag and drop enabled. Source list will have counties given in "list1". This attribute contains the list of items separated by semicolon ";". You can directly hard code these items to component or you can also fetch from any object fields and make that semicolon separated (note: multiselect picklist already contains values as semicolon separated) and pass to component. For storing what user is selecting for your DB or later processing purpose you need to make one extra textfield (or hidden field) and provide that id in above component like "list_2_serialised"

<input id="list_2_serialised" name="list_2_serialised" value="{!list2FinalItems}" type="hidden">



You can download the complete code from this package url
https://login.salesforce.com/?startURL=%2Fpackaging%2FinstallPackage.apexp%3Fp0%3D04t90000000PpxL

You can see the working demo here
http://labsprojects-developer-edition.ap1.force.com/apex/DemoSFDragDropList

The above implementation is for simple list drag drop, one can extend it to make it more advance level to enable drag drop between two different tables or screens.

Hope this will be helpful for users!!!

Thanks
Aslam Bari

19 comments:

Abdul Vahid said...

Its very cool, Keep posting like this useful tool. :)

Haribabu Amudalapalli said...

Aslam......u have great knowledge boss...

ewillig said...

Nice functionality. Can you provide more context for this solution. While I have a lot of technical experience, I have only been a SFDC admin for a couple of years and am just getting into the development side.

Thanks.

Abhay said...

Aslam your contributions are awesome.... keep up the good work... you are a genious

ahlada said...

Hi Aslam.
Its very good functionality.
You are great....

Anonymous said...

Very Very Very Great!

Anonymous said...

Great post!

Do you know how can I enable multiple select on the source list with keeping the existing functionality?

Aslam - The Alexendra said...

Try pressing CTRL key and select multiple items and drag drop, its already there, its just i did not get time to make css for that and i did not mention in blog :)

Anonymous said...

Hi

I need a function where the values deselected from the Multi-Select picklist 1 [Source] becomes the selected value of Multi-Select picklist 2 [Target].

Can we achieve that using this script?

Thanks

Tech_Lab said...

Really It is awesome ...

Anonymous said...

Its not working after I installed in salesforce. I am unable to drag the fields.

Jilani Shaik said...

Is it working in IE 9 also ?

Benjamin Palacios said...

Hi Aslam,
This is very cool, but I can't get it to work. Could you help me?

Aslam - The Alexendra said...

Hi Benjamin,
Please check my new post which also demo about drag drop
Salesforce Remoting & jQuery Drag/Drop Mash-up
http://techsahre.blogspot.in/2013/02/salesforce-remoting-jquery-dragdrop.html

Ganesh said...

hi Aslam its not working please check it once..?

k mahesh said...

Hi,
How to add pagelayout fields to fieldset dynamically(through coding) and how to iterate this fiedset in an visualforce page dynamically.

please help me............

Marri Sneha said...

It didn't work for me. I couldn't drag items to target list.

Denisa Cretu said...

This is an informative post review. I am so pleased to get this post article and nice information. I was looking forward to get such a post which is very helpful to us. A big thank for posting this article in this website. Keep it up.
www.friv2planet.com , www.juegosfrivol.com , www.friv400game.com

Anonymous said...

Hi All,
I have installed this in my local but its not working can any one help me on this please.
Thanks a lot in advance.
Ashish

Post a Comment