Show messages based on Severity in two p:growl

Question

I'm using PrimeFaces p:growl.

<p:growl id="msgsInfo"
         rendered="true"
         showDetail="true" />
<p:growl id="msgsError"
         globalOnly="true"
         showDetail="true"
         sticky="true" />

I need to show in the first growl only Info messages while in the second I need to show Error messages. Using globalOnly when I add error message this is show 2 times.

Any idea?

Answer 1

It would in theory be possible if it supported infoClass, errorClass, etc attributes like as h:messages. You could then just specify a CSS class which does a display: none.

But the p:growl doesn't support those attributes. On the severity level all you can do is changing the icon by infoIcon, errorIcon, etc. So you're pretty lost here.

It might be worth a feature request.

Note that the globalOnly="true" only displays messages which have a null client ID, regardless of their severity.

Answer 2

Please see my answer

PrimeFaces growl change color dynamically (Multiple messages)

You can also find the source code of the project which produces the page below:

Answer 3

I was looking for the same functionality (to set the growl to sticky from a specific message severity). PrimeFaces (6.1) doesn't offer this functionality, but it is quite easy to hack the growl JavaScript. More specifically, in the bindEvents function they check if sticky was configured and based on that:

//hide the message after given time if not sticky
if(!sticky) {
    this.setRemovalTimeout(message);
}

So, you could prototype (override) the bindEvents function and set sticky based on the message severity.

PrimeFaces.widget.Growl.prototype.bindEvents = function(message) {
    var _self = this,
    sticky = this.cfg.sticky;

    // Start hack
    if (!sticky) {
      // Your rule
    }
    ...

You could also prototype renderMessage and add severity as a parameter to bindEvents. I chose to used a quick hack and read it from the className.

I've added these utility functions:

var SEVERITIES = [ "info", "warn", "error", "fatal" ];

function getSeverity(domNode) {
  // HACK Severity can be found in the className after the last - character.
  var severity = domNode.className;
  return severity.substring(severity.lastIndexOf("-") + 1);
}

function getSeverityIndex(severityString) {
  return SEVERITIES.indexOf(severityString);
}

Now you can use the following check:

if (!sticky) {
  sticky = getSeverityIndex(getSeverity(message[0])) >= getSeverityIndex("error");
}

I might create a pull request at GitHub where you can set the minimum severity to stick massages using the stickSeverity attribute on the p:growl component.

Here is the full JavaScript hack (PrimeFaces 6.1):

var SEVERITIES = [ "info", "warn", "error", "fatal" ];

function getSeverity(domNode) {
  // HACK Severity can be found in the className after the last - character.
  var severity = domNode.className;
  return severity.substring(severity.lastIndexOf("-") + 1);
}

function getSeverityIndex(severityString) {
  return SEVERITIES.indexOf(severityString);
}

PrimeFaces.widget.Growl.prototype.bindEvents = function(message) {
    var _self = this,
    sticky = this.cfg.sticky;

    // Start customization
    if (!sticky) {
      sticky = getSeverityIndex(getSeverity(message[0])) >= getSeverityIndex("error");
    }
    // End customization

    message.mouseover(function() {
        var msg = $(this);

        //visuals
        if(!msg.is(':animated')) {
            msg.find('div.ui-growl-icon-close:first').show();
        }
    })
    .mouseout(function() {
        //visuals
        $(this).find('div.ui-growl-icon-close:first').hide();
    });

    //remove message on click of close icon
    message.find('div.ui-growl-icon-close').click(function() {
        _self.removeMessage(message);

        //clear timeout if removed manually
        if(!sticky) {
            clearTimeout(message.data('timeout'));
        }
    });

    //hide the message after given time if not sticky
    if(!sticky) {
        this.setRemovalTimeout(message);
    }
}