jsfprimefacespicklist

Customize the text of the PickList buttons of PrimeFaces

I would like to know if anyone who has faced this has been able to change the text of the buttons of a picklist. Sometimes due to accessibility problems we may need change it for do this requirement.

The selection buttons of a picklist appear with icons but in the primefaces documentation I don't see how they can be changed text or if it is not possible.

[Updated: I am using Primefaces version 6.2]

picklist

Solution

  • PrimeFaces 14+

    The text properties have been moved to client side locale since PrimeFaces 14. See https://primefaces.github.io/primefaces/14_0_0/#/../migrationguide/14_0_0?id=picklist

    Please read the PrimeFaces 14 localization documentation.

    There are many locales supported out of the box. If your locale is not supported, or you want to customize a property, you can simply set or override the property with the following JavaScript:

    PrimeFaces.locales["en"]["startsWith"] = "My starts with";
PrimeFaces.locales["myLocale"]["startsWith"] = "My locale starts with value";

    To get a full overview of what properties are used in this component, please check the widget JavaScript source and search for PrimeFaces.getAriaLabel('xxx').

    Before version 14

    You can simply use the labelDisplay="inline" property.

    <p:pickList ...
            labelDisplay="inline"/>

    This will use the default properties of a supported language. See for example the English properties.

    You can customize the labels like:

    <p:pickList ...
            addLabel="Voeg toe"
            addAllLabel="Voeg alles toe"
            removeLabel="Verwijder"
            removeAllLabel="Verwijder alles"
            labelDisplay="inline"/>

    or override the properties. See

    See also: