Sunday, March 18, 2012

Show error messages in tooltips with PrimeFaces Extensions

One user of PrimeFaces Extensions brought me to an idea to support global tooltips with jQuery selectors. This requirement was done in the current 0.4.0 release. Such enhancement prevents putting of many tooltips to a page. One of use cases would be error messages for invalid components in a big forms. On crowded forms it is preferable to show error messages in tooltips. How to do this? The idea is to apply a global tooltip to invalid components with forSelector="ui-state-error". All invalid components have the style class "ui-state-error".

How does it look?


How does it work?
 
<h:panelGrid id="details" columns="2">
    <pe:requiredLabel for="firstName" value="First Name: "/>
    <p:inputText id="firstName" required="true" title="#{component.valid ? '' : 'First Name can not be empty'}"/>
    <pe:requiredLabel for="lastName" value="Last Name: "/>
    <p:inputText id="lastName" required="true" title="#{component.valid ? '' : 'Last Name can not be empty'}"/>
</h:panelGrid>

<p:commandButton value="Submit" process="details" update="details"/>

<pe:tooltip global="true" position="left center" targetPosition="right center" forSelector=".ui-state-error"/>
 

Easy? Check this use case here please.

Edit: More generic and better solution if you use EL 2.x:
...
<p:inputText id="firstName" required="true"
        label="First Name" title="#{component.valid ? '' : myController.getErrorMessage(component.clientId)}"/>
...
<p:inputText id="lastName" required="true"
        label="Last Name" title="#{component.valid ? '' : myController.getErrorMessage(component.clientId)}"/>
...
Controller bean:
public String getErrorMessage(final String clientId) {
    Iterator<FacesMessage> iter = FacesContext.getCurrentInstance().getMessages(clientId);
    if (iter.hasNext()) {
        return iter.next().getDetail(); // or getSummary()
    }

    return "";
}
The same is for all fields and validators like <f:validateXYZ .../>. You can also customize default message text in JSF validators. Standard JSF validators store messages under well-defined keys. Refer JSF docu please how to do this.

3 comments:

  1. Hello Oleg , Does PrimeFaces Extensions plan on creating any new datatable components or extend on the current functionality that exits in Primefaces ?

    ReplyDelete
  2. No, no plans to create or extend existing datatable. Datatable is too complex to maintain possible extensions. And creating from scratch doesn't make sense. What we will probably do is a new Tree component - with all missing features and more.

    ReplyDelete
  3. Hi Oleg,
    Thanks a lot for this trick, but I if i want to give field description (as a title) so how can i give, because 'title' i am using for error msg.

    ReplyDelete

Note: Only a member of this blog may post a comment.