Question

I would like to customize the presentation of faces messages.

For this,

<h:inputText id="name" required="true" />

when validation is failed, then it will be shown in a

<h:message for="name" />

However, I would like to customize the presentation call JS as follows:

<div class="notification"></div>
function showNotification(msg){
$(".notification").html(msg);
$(".notification").fadeIn(1000, function(){
    timeout = setTimeout(function(){
        $(".notification").fadeOut(1000);
    }, 5000);
});
}

How can I achieve this?

Answer 1

You can use FacesContext#getMessageList() to get the messages in the view, if necessary the ones for a specific client ID. You can iterate over them in a ui:repeat. Each item is a FacesMessage which has several getters. You can display any HTML in the message unescaped by using <h:outputText escape="false">.

So, in a nutshell:

<ui:repeat value="#{facesContext.messageList('form:name')}" var="message">
    <div><h:outputText value="#{message.summary}" escape="false" /></div>
</ui:repeat>

(in the above example, I assume that your form has id="form")

Or, if that HTML help link is actually not part of the message, then so:

<ui:repeat value="#{facesContext.messageList('form:name')}" var="message">
    <div>#{message.summary} <a href="help.xhtml">help</a></div>
</ui:repeat>