26

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.

multi-select picklist https://i.sstatic.net/pIXBX.png

Any ideas on how to go about this?

5
  • Are you referring to dynamic visualforce bindings?
    – Nick C
    Commented Sep 8, 2012 at 4:43
  • When asking questions in the future please make sure the title contains some level of detail about what you're asking. "How do I build" is not a complete question. Commented Sep 8, 2012 at 6:01
  • @Daniel How to make show -None-, if the left side and right getting the no values. as a standard picklist feature.
    – Alex
    Commented Mar 30, 2015 at 5:31
  • @Alex Feel free to ask a new question with what you are trying to do and what you have tried so far. You can reference this question if required. Commented Mar 30, 2015 at 8:01
  • @DanielBallinger I have created the new question : salesforce.stackexchange.com/questions/70657/…
    – Alex
    Commented Mar 30, 2015 at 10:37

6 Answers 6

27

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

2
  • This is Exactly what I was looking for! Thank you so much!
    – Kevin P
    Commented Sep 8, 2012 at 14:20
  • 1
    an updated version of Pat Patterson's controller is located below (just added constructors) Commented Nov 7, 2013 at 5:07
7

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.

1
  • How to make show -None-, if the left side and right getting the no values. as a standard picklist feature.
    – Alex
    Commented Mar 30, 2015 at 5:31
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

3

I installed the package Pat Patterson created (located here) is really nice, and easy to get ahold of. However, the code is a little sparse. Here's an updated version of the Controller.

Revisions = adding constructors to avoid dereferencing null-objects.

/*
 * MultiselectController synchronizes the values of the hidden elements to the
 * SelectOption lists.
 */
public with sharing class MultiselectController {
    // SelectOption lists for public consumption
    public SelectOption[] cLeftOptions { get; set{
        SelectOption[] tmp=value;
        if(tmp==null){tmp=new SelectOption[]{};}
        this.cLeftOptions=tmp;
    }}
    public SelectOption[] cRightOptions { get; set{
        SelectOption[] tmp=value;
        if(tmp==null){tmp=new SelectOption[]{};}
        this.cRightOptions=tmp;
    }}
    public MultiselectController(){
        cLeftOptions=new SelectOption[]{};
        cRightOptions=new SelectOption[]{};
    }//ENd init()


    // Parse &-separated values and labels from value and 
    // put them in option
    private void setOptions(SelectOption[] options, String value) {
        options.clear();
        String[] parts = value.split('&');
        for (Integer i=0; i<parts.size()/2; i++) {
            options.add(new SelectOption(EncodingUtil.urlDecode(parts[i*2], 'UTF-8'), 
              EncodingUtil.urlDecode(parts[(i*2)+1], 'UTF-8')));
        }
    }

    // Backing for hidden text field containing the options from the
    // left list
    public String leftOptionsHidden { get; set {
           leftOptionsHidden = value;
           setOptions(cLeftOptions, value);
        }
    }

    // Backing for hidden text field containing the options from the
    // right list
    public String rightOptionsHidden { get; set {
           rightOptionsHidden = value;
           setOptions(cRightOptions, value);
        }
    }
}
2

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

This is the only thing you need to add to Patt Patterson contribute to make it work great:

public MultiselectController(){
    leftOptions = new SelectOption[]{};
    rightOptions = new SelectOption[]{};
}
1
  • How to make show -None-, if the left side and right getting the no values. as a standard picklist feature.
    – Alex
    Commented Mar 30, 2015 at 5:29
-1

http://pexlify.com/custom-multi-user-selection-in-visualforce/

Multi select of users, you can apply this to any Salesforce object

1
  • 2
    Or please post full answers which include why this is an answer, and what is the answer. User external references only to refer to a source or more details or examples. We'd hate to see your answer become meaningless because the external page goes offline. Commented Dec 30, 2015 at 19:27

You must log in to answer this question.

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