+ Start a Discussion
V MANJUV MANJU 

How to display the below format on VF page using custom functionality, Please help me out.

Suppose take record fields in picklist.
bob_buzzardbob_buzzard
You can get a good start on this using Pat Patterson's multi-select picklist component. It doesn't have the up/down, but does provide the ability to move items between the left and right lists:

https://developer.salesforce.com/blogs/developer-relations/2012/06/a-multiselect-picklist-visualforce-component.html

There's also a pure Visualforce example of this in chapter 2 of my book, the Visualforce Development Cookbook (http://www.packtpub.com/visualforce-development-cookbook/book).
Kathir DevanKathir Devan
Hi manju,

Here below as for as same your requirement little bit  modify code.

VF Page:
<apex:page standardController="Account" recordsetvar="recs" extensions="TestMultipicklist" >
<apex:messages /><br/>
<apex:form >
<apex:pageBlock title="Select Fields to Display" id="selectionBlock" >
<apex:panelGrid columns="5">
<apex:selectList id="unselected_list" required="false"
value="{!selected}" multiselect="true" size="20" style="width:250px">
<apex:selectOptions value="{!unSelectedOptions}" />
</apex:selectList>
<apex:panelGroup >
<apex:commandButton value=">>>" action="{!DoSelect}" rerender="selectionBlock"/>
<br/>
<apex:commandButton value="<<<" action="{!DoUnselect}" rerender="selectionBlock" />
</apex:panelGroup>
<apex:selectList id="selected_list" required="false"
value="{!unselected}" multiselect="true" size="20" style="width:250px">
<apex:selectOptions value="{!selectedOptions}" />
</apex:selectList>
</apex:panelGrid>
<em>Note: fields marked "*" aren't accessible by you</em>
</apex:pageBlock>
<br/>
<apex:commandButton value="Show Selected" action="{!show}" />
</apex:form>
</apex:page>

Controller:


global class TestMultipicklist{
private ApexPages.StandardSetController controller;
private PageReference savePage;
private Set<String> unSelectedNames = new Set<String>();
private Set<String> selectedNames = new Set<String> ();
private Set<String> inaccessibleNames = new Set<String>();
public List<String> selected {get; set; }
public List<String> unselected {get; set; }
public TestMultipicklist() {
init();
}
public TestMultipicklist(ApexPages.StandardSetController controller) {
this.controller = controller;
init();
}
public PageReference show() {
controller.reset();
controller.addFields(new List<String>(selectedNames));
// See additional notes below for the previous Apex methods
List<String> displayedNames = new List<String>(selectedNames);
displayedNames.sort();
displayFields = displayedNames;
return savePage;
}
public PageReference Customize() {
savePage = ApexPages.CurrentPage();
return Page.DynamicAccFieldList;
}
private void init() {
Map<String, Schema.SobjectField> fields =
Schema.SobjectType.Account.fields.getMap();
for (String s : fields.keySet()) {
if (s != 'Name') { // name is always displayed
unSelectedNames.add(s);
}
if (!fields.get(s).getDescribe().isAccessible()) {
inaccessibleNames.add(s);
}
}
}
public List<SelectOption> selectedOptions { get
{
List<String> sorted = new List<String>(selectedNames);
sorted.sort();
List<SelectOption> options = new List<SelectOption>();
for (String s : sorted) {
options.add(new SelectOption(s, fixName(s)));
}
return options;
}
}
public List<SelectOption> unSelectedOptions { get
{
List<String> sorted = new List<String>(unSelectedNames);
sorted.sort();
List<SelectOption> options = new List<SelectOption>();
for (String s : sorted) {
options.add(new SelectOption(s, fixName(s)));
}
return options;
}
}
private String fixName(String s) {
return inaccessibleNames.contains(s) ? '*' + s : s;
}
public void doSelect() {
for (String s: selected) {
selectedNames.add(s);
unselectedNames.remove(s);
}
}
public void doUnSelect() {
for (String s: unselected) {
unSelectedNames.add(s);
selectedNames.remove(s);
}
}
public List<String> displayFields {
get; private set;
}
}


AshwaniAshwani
This isn n't a tough task.

There need two selectlist of type multi-select and two coomandlink button. On click of command link button you can get selected elements in controller variable, just add those varibles in right hand assigned variable bound and rerender both lists. Same as if left side command link is clicked you can get selected elements of right side in controller just remove them form right hand property and add it to left hand property. Rerender both list. This way you can achieve this functionality from server-side.