Search code examples
jsfprimefaces

PrimeFaces PickList custom localization


I have a picklist like this one:

<div class="card">
    <h5>Advanced</h5>
    <p:pickList id="pojoPickList" value="#{pickListView.countries}" var="country"
                itemValue="#{country}" itemLabel="#{country.name}" converter="#{countryConverter}"
                labelDisplay="inline"
    >

        <f:facet name="sourceCaption">Available</f:facet>
        <f:facet name="targetCaption">Starting</f:facet>

        <p:ajax event="transfer" listener="#{pickListView.onTransfer}" update="msg"/>

        <p:column style="width:94%">
            <div class="flex align-items-center">
                <span class="flag flag-#{country.code} mr-2" style="width: 30px; height: 20px" />
                <h:outputText value="#{country.name}"/>
            </div>
        </p:column>
    </p:pickList>
</div>

The buttons are labeled "Move to Target", "Move all to Target" and so on. I want to change the labels for English and for other countries. How do I go for that? I found documentation here and here, but they don't point me to where to start overwriting the default translations. I also found this question, but the addLabel, addAllLabel, ... attributes were removed in PrimeFaces 14.

Edit: The possible duplicate was edited afterwards to better answer this question. My description already contained a link to it and the explanation why it doesn’t answer my question. It still doesn’t, see comment section.


Solution

  • Just add this script to your page and change any language you want. Once you get it working move all of this to a stefan-locales.js file and just load that file with a normal <h:outputScript>

    This overrides those labels for English EN locale. Obviously you can do the same for others.

      PrimeFaces.locales["en"] = $.extend(true, {}, PrimeFaces.locales["en"], {
        aria: {
          moveAllToSource: "Move All to Source",
          moveAllToTarget: "Move All to Target",
          moveBottom: "Move Bottom",
          moveDown: "Move Down",
          moveToSource: "Move to Source",
          moveToTarget: "Move to Target",
          moveTop: "Move Top",
          moveUp: "Move Up",
        },
      });