PrimeFaces ring with OmniFaces unique value column

As you probably know, PrimeFaces comes with a component capable to display data with a circular animation. This component is named Ring.

For example, the below snippet of code will work in conjunction with BarcelonaSquadBean to return the result from image below:

<h:form id="form">           

 <p:panel>

  <p:ring id="custom" value="#{barcelonaSquadBean.players}" var="t">

   <p:outputPanel style="text-align: center; height:90%;" layout="block">                  

    <p:inputText value="#{t.name}" required="true" style="width: 90%; height: inherit;"/>           

   </p:outputPanel>                            

  </p:ring>   

 </p:panel>

 <p:panel style="text-align: center; margin-top: 10px;">

  <p:commandButton actionListener="#{barcelonaSquadBean.someAction()}" update="@form"

                   value="Subscribe Team"/>                                   

  <p:messages id="msgs"/>

 </p:panel>

</h:form>

The issue consist in the fact that we can mistakenly provide the same player name twice and obviosuly this is not diserable. In order to fix this, we can use the OmniFaces ValidateUniqueColumn validator. This validator is exposed to page authors via <o:validateUniqueColumn/> tag. The main characteristics of this validator are:

• It validates if the given UIInput component in an UIData component has an unique value throughout all rows.
• It includes in validation the data that is not visible in case of using pagination, as long as it is in the data model.
• It works directly on the data model (e.g. when lazy loading is used, the data model contains a subset of data; only this subset counts on validation).
• It signals only the first invalid row on which the value is actually changed.
• A faces message will be added on the client ID of the input component in this invalid row.
• Its default message is of type (the {0} placeholder represents the label of the input component, while the {1} placeholder represents the 1‐based row index of the data model):

{0}: Please fill out an unique value for the entire column. Duplicate found in row {1} 

 If you need to a custom message then just use the message attribute:

<o:validateUniqueColumn message="custom message here" />

So, we can use <o:validateUniqueColumn/> in our case like below:

<p:panel>

 <p:ring id="custom" value="#{barcelonaSquadBean.players}" var="t">

  <p:outputPanel style="text-align: center; height:90%;" layout="block">                  

   <p:inputText value="#{t.name}" required="true" style="width: 90%; height: inherit;">           

    <o:validateUniqueColumn message="Duplicate player not allowed!"/>

   </p:inputText>                     

  </p:outputPanel>                           

 </p:ring>   

</p:panel> 

This time we cannot submit the team with duplicate players. Check figure below:

The complete application is available here.

Read more such goodies in:

PrimeFaces & OmniFaces - Powers Combined