selectManyShuttle with prepolulated list : ADF

This post talks about how to use af:selectManyShuttle component. Not only how to use it, but to display already selected set of values as pre populated list out of complete list.

So shuttle component has two tags which are of importance. 

<af:selectManyShuttle value = "selected values" has value attribute which refers to selected values and inside this tag there is <f:selectItems  value="all values". This selectItems tag refers to complete set of list.


Lets go ahead and implement the selectManyShuttle component with prepopulated list.

This app can be downloaded from here ShuttleExample.zip .

I created a simple ADF application in JDev. Created a jspx page in ViewController project named shuttleTest.jspx

Now as said in the beginning, we need to set value attribute of af:selectManyShuttle for selected list of values and value attribute of f:selectItems for complete list. So we create a backing bean named ShuttleValues with two ArrayList attributes. selectedValues and allValues.

Now we need to implement getSelectedValues and getAllValues method. Below is their implementation.

So the main point to remember here is that All values are instance of javax.faces.model.SelectItem and selected values are just values in list which are part of all values.

Now we need to assign these two methods getAllValues and getSelected values to the value attribute of af:selectManyShuttle and f:selectItems. Below it is done.

Now lets run the page and test our shuttle component.

See the value1, value2 and value3 are in selected list on the right hand side. This is what we coded in getSelectedValues method.

So in the getSelectedValues and getAllValues we can get the values from the DB table and show them in the shuttle component. I used hard coded values in this example for demo purpose and to keep it simple.