visualforce interface

Question

hi i want to create an interface like this in visualforce

where values in first column will come from apex controller

please give some idea of doing this in visualforce.Also the values which user will move to second column will be saved somewhere.I am thinking of using custom settings,what all are the options available.

Thanks

JCD JCD · Accepted Answer · 2012-05-22T17:04:02

Unfortunately the only way to leverage the functionality that you're describing in VisualForce is to use an <apex:inputField> tag that binds to a multi-picklist field on an SObject. This option gives you a place to save the data, although you will need to specify the possible values beforehand in the configuration (which it doesn't sound like you want to do).

If you want to populate the values dynamically, you will need to create a list of SelectOptions in your controller and bind that list to an <apex:selectlist> tag with the multiselect attribute set (keep in mind that this won't give you the fancy left and right arrows that you showed in your screenshot, but it will allow a user to select multiple options by shift/ctrl-clicking).

VisualForce snippet:

<apex:selectList value="{!multiPicklistVal}" multiselect="true">
    <apex:selectOptions value="{!multiPicklistOptions}"/>
</apex:selectList>

Apex controller snippet:

public String[] multiPicklistVal {public get; public set;}
public List<SelectOption> getMultiPicklistOptions() {
    List<SelectOption> opts = new List<SelectOption>();
    opts.add(new SelectOption('Red', 'Red'));
    opts.add(new SelectOption('Green', 'Green'));
    opts.add(new SelectOption('Blue', 'Blue'));
    return opts;
}

This approach will allow you to reference multiPicklistVal in your action methods as an array of Strings, each of which have been selected by the user. From here, you could save these in a custom setting as you mentioned, or in a custom object (but if you're going to go the custom object route, you may as well just use the out-of-the-box functionality I described at the top of this post).

visualforce interface

1 Answers