Growl is a notification widget to display messages as an overlay.

//initialize
$('#default').puigrowl();

//show messages
$('#default').puigrowl('show', [{severity: 'info', summary: 'Message Summary', detail: 'Message Detail'}]);
                                

<div id="default" />   
                                

Name	Type	Default	Description
sticky	boolean	false	Sticky messages do not disappear after a timeout defined by life.
life	int	3000	Defines timeout in milliseconds to remove messages.
appendTo	jQuery,Selector,Element	document.body	Defines where the growl would be appended.
messages	array	null	Array of messages to display initially after creating growl.

No events.

Name	Parameters	Description
show	messages: Array of messages	Displays an array of messages.
clear	-	Hides the growl and clears the displayed messages.
option	name: Name of the option	Returns the value of the option.
option	name: Name of the option, value: Value of the option	Set the value of the option.

$(function() {
    $('#default').puigrowl();

    $('#doc').puitabview();

    $('#btn-info').puibutton().click(function() {
        addMessage([{severity: 'info', summary: 'Message Title', detail: 'Message Detail here.'}]);
    });

    $('#btn-warn').puibutton().click(function() {
        addMessage([{severity: 'warn', summary: 'Message Title', detail: 'Message Detail here.'}]);
    });

    $('#btn-error').puibutton().click(function() {
        addMessage([{severity: 'error', summary: 'Message Title', detail: 'Message Detail here.'}]);
    });

    $('#btn-multiple').puibutton().click(function() {
        addMessage([{severity: 'info', summary: 'Message Title', detail: 'Message Detail here.'}
            , {severity: 'warn', summary: 'Message Title', detail: 'Message Detail here.'}
            , {severity: 'error', summary: 'Message Title', detail: 'Message Detail here.'}]);
    });

    addMessage = function(msg) {
        $('#default').puigrowl('show', msg);
    };

    addInfoViaElement = function() {
        document.getElementById('growlel').show([{severity: 'info', summary: 'Message Title', detail: 'Created With PrimeElement'}])
    };

    addWarnViaElement = function() {
        document.getElementById('growlel').show([{severity: 'warn', summary: 'Message Title', detail: 'Created With PrimeElement'}])
    };

    addErrorViaElement = function() {
        document.getElementById('growlel').show([{severity: 'error', summary: 'Message Title', detail: 'Created With PrimeElement'}])
    };

    addMultiViaElement = function() {
        document.getElementById('growlel').show([{severity: 'info', summary: 'Message Title', detail: 'Created With PrimeElement'}
            , {severity: 'warn', summary: 'Message Title', detail: 'Created With PrimeElement'}
            , {severity: 'error', summary: 'Message Title', detail: 'Created With PrimeElement'}]);
    };
});
                                

<h3>Basic</h3>
<div id="default"></div>

<button id="btn-info" type="button">Info</button>
<button id="btn-warn" type="button">Warn</button>
<button id="btn-error" type="button">Error</button>
<button id="btn-multiple" type="button">Multiple</button>

<h3>PrimeElement</h3>
<p-growl id="growlel"></p-growl>

<button type="button" is="p-button" onclick="addInfoViaElement()">Info</button>
<button type="button" is="p-button" onclick="addWarnViaElement()">Warn</button>
<button type="button" is="p-button" onclick="addErrorViaElement()">Error</button>
<button type="button" is="p-button" onclick="addMultiViaElement()">Multiple</button>
                                

Usage

Messages on growl element are displayed using show() method that takes an array of messages.

<p-growl id="growlel"></p-growl>
                                

//single
document.getElementById('growlel').show([{severity: 'error', summary: 'Message Title', detail: 'Created With PrimeElement'}]);

//multiple
document.getElementById('growlel').show([{severity: 'info', summary: 'Message Title', detail: 'Created With PrimeElement'}
            , {severity: 'warn', summary: 'Message Title', detail: 'Created With PrimeElement'}
            , {severity: 'error', summary: 'Message Title', detail: 'Created With PrimeElement'}]);
                                

Attributes

Name	Type	Default	Description
id	string	null	Identifier of the element.
sticky	boolean	false	Sticky messages do not disappear after a timeout defined by life.
life	int	3000	Defines timeout in milliseconds to remove messages.
appendTo	string	null	Id of the element to append the growl, defaults to document.body.