	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

OrderList

OrderList is used to sort a collection via Drag and Drop based reordering, transition effects, pojo support, country support and more.

OrderList Tag Documentation

OrderList is used to reorder a list via drag and drop.

Name	Type	Required	Default	Description
id	String	false	generated	Unique identifier of the component in a namingContainer.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side widget.
controlsLocation	String	false	left	Location of the controls, valid values are "left" and "right".
converter	Converter	false		EL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessage	String	false
disabled	boolean	false	false	Disables the component.
effect	String	false		Effect to use when moving items.
flex	Boolean	false		Use modern FlexGrid CSS for this component.
immediate	boolean	false	false	When set true, process validations logic is executed at apply request values phase for this component.
itemLabel	String	false		Label of the item.
itemValue	Object	false		Value of the item.
moveBottomLabel	String	false	Move Bottom	Label for move bottom button.
moveDownLabel	String	false	Move Down	Label for move down button.
moveTopLabel	String	false	Move Top	Label for move top button.
moveUpLabel	String	false	Move Up	Label for move up button.
required	boolean	false	false	Marks component as required.
requiredMessage	String	false
responsive	boolean	false	false	In responsive mode, the layout of OrderList is optimized for smaller screens.
style	String	false		Inline style of the component.
styleClass	String	false		Style class of the component.
submittedValue	Object	false
validator	Validator	false		A method expression referring to a method validating the input.
validatorMessage	String	false
value	Object	false		Value of the component.
valueChangeListener	ValueChangeListener	false		A method binding expression referring to a method for handling a valuchangeevent.
var	String	false		Name of the iterator variable used to reference each data in the list.

Name	Description
caption	Caption of the list.

Name	Type	Default	Description
select	SelectEvent	false	Fires when an item is selected.
unselect	UnselectEvent	false	Fires when an item is unselected.
reorder	AjaxBehaviorEvent	false	Fires when items are reordered.

Name	Library	Target
components.css	primefaces
jquery/jquery.js	primefaces
jquery/jquery-plugins.js	primefaces
core.js	primefaces
components.js	primefaces

Family org.primefaces.component

Type org.primefaces.component.OrderList

Class org.primefaces.component.orderlist.OrderList

Renderer Type org.primefaces.component.OrderListRenderer

Renderer Class org.primefaces.component.orderlist.OrderListRenderer

RESOURCES

Tag DocumentationNew DocumentationNew Documentation JSDoc

Usage


<h:form>
    <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true"/>

    <div class="card">
        <h5>Basic</h5>
        <p:orderList value="#{orderListView.cities}" var="city" controlsLocation="none" itemLabel="#{city}" itemValue="#{city}" />
    </div>

    <div class="card">
        <h5>Advanced</h5>
        <p:orderList value="#{orderListView.countries}" var="country" itemValue="#{country}"
                     converter="#{countryConverter}" controlsLocation="left" responsive="true">
            <p:ajax event="select" listener="#{orderListView.onSelect}" update="msgs"/>
            <p:ajax event="unselect" listener="#{orderListView.onUnselect}" update="msgs"/>
            <p:ajax event="reorder" listener="#{orderListView.onReorder}" update="msgs"/>

            <f:facet name="caption">Available</f:facet>

            <p:column style="width:40px">
                <span class="flag flag-#{country.code}" style="width: 30px; height: 20px"/>
            </p:column>

            <p:column>
                <h:outputText value="#{country.name}"/>
            </p:column>
        </p:orderList>
    </div>

</h:form>


package org.primefaces.showcase.view.data;

import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;
import org.primefaces.showcase.domain.Country;
import org.primefaces.showcase.service.CountryService;

import java.util.ArrayList;
import java.util.List;

import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Inject;
import jakarta.inject.Named;

@Named
@RequestScoped
public class OrderListView {

    @Inject
    private CountryService service;

    private List<String> cities;
    private List<Country> countries;

    @PostConstruct
    public void init() {
        //Cities
        cities = new ArrayList<>();
        cities.add("San Francisco");
        cities.add("London");
        cities.add("Paris");
        cities.add("Istanbul");
        cities.add("Berlin");
        cities.add("Barcelona");
        cities.add("Rome");

        //Countrys
        countries = service.getCountries().subList(0, 10);
    }

    public CountryService getService() {
        return service;
    }

    public void setService(CountryService service) {
        this.service = service;
    }

    public List<String> getCities() {
        return cities;
    }

    public void setCities(List<String> cities) {
        this.cities = cities;
    }

    public List<Country> getCountries() {
        return countries;
    }

    public void setCountries(List<Country> countries) {
        this.countries = countries;
    }

    public void onSelect(SelectEvent<Country> event) {
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Selected", event.getObject().getName()));
    }

    public void onUnselect(UnselectEvent<Country> event) {
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Unselected", event.getObject().getName()));
    }

    public void onReorder() {
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "List Reordered", null));
    }
}


package org.primefaces.showcase.service;

import org.primefaces.showcase.domain.Country;

import java.util.ArrayList;
import java.util.Comparator;
import java.util.List;
import java.util.Locale;
import java.util.Map;
import java.util.stream.Collectors;
import java.util.stream.Stream;

import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.ApplicationScoped;
import jakarta.inject.Named;

@Named
@ApplicationScoped
public class CountryService {

    private List<Country> countries;
    private Map<Integer, Country> countriesAsMap;
    private List<Country> locales;
    private Map<Integer, Country> localesAsMap;

    public static Stream<Country> toCountryStream(String... isoCodes) {
        return Stream.of(isoCodes)
                .map(isoCode -> new Locale.Builder().setRegion(isoCode).build())
                .map(CountryService::toCountry);
    }

    private static Locale toLocale(String language, String country) {
        return new Locale.Builder().setLanguage(language).setRegion(country).build();
    }

    public static Country toCountry(Locale locale) {
        return CountryService.toCountry(locale, false);
    }

    public static Country toCountry(Locale locale, boolean rtl) {
        //use hash code from locale to have a reproducible ID (required for CountryConverter)
        return new Country(locale.hashCode(), locale, rtl);
    }

    @PostConstruct
    public void init() {
        countries = CountryService.toCountryStream(Locale.getISOCountries())
                .sorted(Comparator.comparing(Country::getName))
                .collect(Collectors.toList());

        locales = new ArrayList<>();

        locales.add(CountryService.toCountry(Locale.US));
        locales.add(CountryService.toCountry(Locale.UK));
        locales.add(CountryService.toCountry(toLocale("en", "AU")));
        locales.add(CountryService.toCountry(Locale.FRANCE));
        locales.add(CountryService.toCountry(Locale.GERMANY));
        locales.add(CountryService.toCountry(toLocale("de", "AT")));
        locales.add(CountryService.toCountry(toLocale("de", "CH")));
        locales.add(CountryService.toCountry(Locale.ITALY));
        locales.add(CountryService.toCountry(Locale.KOREA));
        locales.add(CountryService.toCountry(toLocale("es", "ES")));
        locales.add(CountryService.toCountry(toLocale("ca", "ES")));
        locales.add(CountryService.toCountry(toLocale("nl", "NL")));
        locales.add(CountryService.toCountry(toLocale("pt", "BR")));
        locales.add(CountryService.toCountry(toLocale("pt", "PT")));
        locales.add(CountryService.toCountry(toLocale("ar", "SA"), true));
        locales.add(CountryService.toCountry(toLocale("ar", "TN"), true));
        locales.add(CountryService.toCountry(toLocale("bg", "BG")));
        locales.add(CountryService.toCountry(toLocale("bn", "BD")));
        locales.add(CountryService.toCountry(toLocale("bs", "BA")));
        locales.add(CountryService.toCountry(toLocale("cs", "CZ")));
        locales.add(CountryService.toCountry(toLocale("el", "GR")));
        locales.add(CountryService.toCountry(toLocale("et", "EE")));
        locales.add(CountryService.toCountry(toLocale("fa", "IR"), true));
        locales.add(CountryService.toCountry(toLocale("fi", "FI")));
        locales.add(CountryService.toCountry(toLocale("da", "DK")));
        locales.add(CountryService.toCountry(toLocale("hi", "IN")));
        locales.add(CountryService.toCountry(toLocale("in", "ID")));
        locales.add(CountryService.toCountry(toLocale("is", "IS")));
        locales.add(CountryService.toCountry(toLocale("hr", "HR")));
        locales.add(CountryService.toCountry(toLocale("ja", "JP")));
        locales.add(CountryService.toCountry(toLocale("hu", "HU")));
        locales.add(CountryService.toCountry(toLocale("he", "IL"), true));
        locales.add(CountryService.toCountry(toLocale("ka", "GE")));
        locales.add(CountryService.toCountry(toLocale("ckb", "IQ"), true));
        locales.add(CountryService.toCountry(toLocale("km", "KH")));
        locales.add(CountryService.toCountry(toLocale("ky", "KG")));
        locales.add(CountryService.toCountry(toLocale("kk", "KZ")));
        locales.add(CountryService.toCountry(toLocale("lt", "LT")));
        locales.add(CountryService.toCountry(toLocale("lv", "LV")));
        locales.add(CountryService.toCountry(toLocale("ms", "MY")));
        locales.add(CountryService.toCountry(toLocale("no", "NO")));
        locales.add(CountryService.toCountry(toLocale("pl", "PL")));
        locales.add(CountryService.toCountry(toLocale("ro", "RO")));
        locales.add(CountryService.toCountry(toLocale("ru", "RU")));
        locales.add(CountryService.toCountry(toLocale("sk", "SK")));
        locales.add(CountryService.toCountry(toLocale("sl", "SI")));
        locales.add(CountryService.toCountry(toLocale("sr", "BA")));
        locales.add(CountryService.toCountry(toLocale("sr", "RS")));
        locales.add(CountryService.toCountry(toLocale("sv", "SE")));
        locales.add(CountryService.toCountry(toLocale("th", "TH")));
        locales.add(CountryService.toCountry(toLocale("tr", "TR")));
        locales.add(CountryService.toCountry(toLocale("uk", "UA")));
        locales.add(CountryService.toCountry(toLocale("uz", "UZ")));
        locales.add(CountryService.toCountry(toLocale("vi", "VN")));
        locales.add(CountryService.toCountry(Locale.SIMPLIFIED_CHINESE));
        locales.add(CountryService.toCountry(Locale.TRADITIONAL_CHINESE));
    }

    public List<Country> getCountries() {
        return new ArrayList<>(countries);
    }

    public Map<Integer, Country> getCountriesAsMap() {
        if (countriesAsMap == null) {
            countriesAsMap = getCountries().stream().collect(Collectors.toMap(Country::getId, country -> country));
        }
        return countriesAsMap;
    }

    public List<Country> getLocales() {
        return new ArrayList<>(locales);
    }

    public Map<Integer, Country> getLocalesAsMap() {
        if (localesAsMap == null) {
            localesAsMap = getLocales().stream().collect(Collectors.toMap(Country::getId, country -> country));
        }
        return localesAsMap;
    }
}


package org.primefaces.showcase.domain;

import java.io.Serializable;
import java.util.Locale;
import java.util.Objects;

public class Country implements Serializable, Comparable<Country> {

    private int id;
    private String name;
    private String code;
    private Locale locale;
    private boolean rtl;

    public Country() {
    }

    public Country(int id, Locale locale) {
        this(id, locale.getDisplayCountry(), locale.getCountry().toLowerCase(), locale);
    }

    public Country(int id, Locale locale, boolean rtl) {
        this(id, locale.getDisplayCountry(), locale.getCountry().toLowerCase(), locale);
        this.rtl = rtl;
    }

    public Country(int id, String name, String code) {
        this(id, name, code, null);
    }

    public Country(int id, String name, String code, Locale locale) {
        this.id = id;
        this.name = name;
        this.code = code;
        this.locale = locale;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public Locale getLocale() {
        return locale;
    }

    public void setLocale(Locale locale) {
        this.locale = locale;
    }

    public String getLanguage() {
        return locale == null ? "en" : locale.getLanguage();
    }

    public String getDisplayLanguage() {
        return locale == null ? "English" : locale.getDisplayLanguage();
    }

    public boolean isRtl() {
        return rtl;
    }

    public void setRtl(boolean rtl) {
        this.rtl = rtl;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) {
            return true;
        }
        if (o == null || getClass() != o.getClass()) {
            return false;
        }
        Country country = (Country) o;
        return id == country.id
                && Objects.equals(name, country.name)
                && Objects.equals(code, country.code);
    }

    @Override
    public int hashCode() {
        return Objects.hash(id, name, code);
    }

    @Override
    public String toString() {
        return name;
    }

    @Override
    public int compareTo(Country o) {
        return name.compareTo(o.name);
    }

}


package org.primefaces.showcase.convert;

import org.primefaces.showcase.domain.Country;
import org.primefaces.showcase.service.CountryService;

import jakarta.enterprise.context.ApplicationScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.component.UIComponent;
import jakarta.faces.context.FacesContext;
import jakarta.faces.convert.Converter;
import jakarta.faces.convert.ConverterException;
import jakarta.faces.convert.FacesConverter;
import jakarta.inject.Inject;
import jakarta.inject.Named;

@Named
@ApplicationScoped
@FacesConverter(value = "countryConverter", managed = true)
public class CountryConverter implements Converter<Country> {

    @Inject
    private CountryService countryService;

    @Override
    public Country getAsObject(FacesContext context, UIComponent component, String value) {
        if (value != null && !value.trim().isEmpty()) {
            try {
                return countryService.getCountriesAsMap().get(Integer.parseInt(value));
            }
            catch (NumberFormatException e) {
                throw new ConverterException(new FacesMessage(FacesMessage.SEVERITY_ERROR, "Conversion Error", "Not a valid country."));
            }
        }
        else {
            return null;
        }
    }

    @Override
    public String getAsString(FacesContext context, UIComponent component, Country value) {
        if (value != null) {
            return String.valueOf(value.getId());
        }
        else {
            return null;
        }
    }
}

OrderList

OrderList Tag Documentation

Basic

Advanced

Usage

Reloading page