The orderList
component is used to sort a collection with the support of drag-and-drop reordering, transition effects, and POJO support.
A basic definition for the orderList
that sorts a collection of strings would be as shown here:
<p:orderList id="simple" value="#{orderListBean.countries}" var="country" itemLabel="#{country}" itemValue="#{country}" />
The visual output of the component will be as shown here:
To define a header on top of orderList
, a facet with the name caption
should be provided as shown here:
<p:orderList id="withCaption" value="#{orderListBean.countries}"
var="country" itemLabel="#{country}" itemValue="#{country}">
<f:facet name="caption">
Countries
</f:facet>
</p:orderList>
With the controlsLocation
attribute, we can control the position of the controls. The default value is left
; the other possible values are right
and none
.
Effects can be applied with the effect
attribute for content transition when a selection is moved upwards or downwards. The default value of the effect
attribute is fade
. The other possible values for the effect attribute are as follows:
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter5/orderList.jsf
.