Time for action – displaying FacesMessage with HTML content

Let us see how to use the escape attribute, while displaying FacesMessages with HTML content. Perform the following steps:

  1. Create a form with two input fields as follows:
    <h:form id="form1" style="width: 500px; padding-left: 10px;">
      <p:panel header="Messages with HTML content - Using 'escape' attribute">
      <h:panelGrid columns="3">
        <h:outputText value="FirstName" />
        <p:inputText id="fName" value="#{messagesController.user.firstName}"/> 
        <p:message for="fName" escape="false" />
        
        <h:outputText value="LastName" />
        <p:inputText id="lName" value="#{messagesController.user.lastName}"/> 
        <p:message for="lName" escape="true" />
        
        <p:commandButton value="Submit" actionListener="#{messagesController.addHtmlMessages}" update="form1"/>
      </h:panelGrid>
      </p:panel>
    </h:form>
  2. In action Handler method, addHtmlMessages(), add FacesMessage with HTML content:
    public void addHtmlMessages()
    {
      FacesContext.getCurrentInstance().addMessage("form1:fName",
        new FacesMessage(FacesMessage.SEVERITY_INFO, "<font size='4'>FirstName : "+user.getFirstName()+"</font>", null));
      FacesContext.getCurrentInstance().addMessage("form1:lName",
        new FacesMessage(FacesMessage.SEVERITY_INFO, "<font size='4'>LastName :"+user.getLastName()+"</font>", null));
    }

What just happened?

We have added FacesMessages with HTML content for both fName and lName clientIds. For fName, we haven't escaped HTML content, so the message displayed is with font size 4. But for lName, we set escape="true" and hence, the HTML content is displayed as it is (with HTML tags).

What just happened?