Add message to p:growl using Javascript

Question

I want to display a growl in client-side using Javascript.

I mean this UI-component:

enter image description here

I found this thread , However , I can't find an object called :topBar

Known also that using:

grep -rl to find text in files leads to discover this JS :

/**
 * PrimeFaces NotificationBar Widget
 */
PrimeFaces.widget.NotificationBar = PrimeFaces.widget.BaseWidget.extend({

    init: function(cfg) {
        this._super(cfg);

        var _self = this;

        //relocate
        this.jq.css(this.cfg.position, '0').appendTo($('body'));

        //display initially
        if(this.cfg.autoDisplay) {
            $(this.jq).css('display','block')
        }

        //bind events
        this.jq.children('.ui-notificationbar-close').click(function() {
            _self.hide();
        });
    },

    show: function() {
        if(this.cfg.effect === 'slide')
            $(this.jq).slideDown(this.cfg.effect);
        else if(this.cfg.effect === 'fade')
            $(this.jq).fadeIn(this.cfg.effect);
        else if(this.cfg.effect === 'none')
            $(this.jq).show();
    },

    hide: function() {
        if(this.cfg.effect === 'slide')
            $(this.jq).slideUp(this.cfg.effect);
        else if(this.cfg.effect === 'fade')
            $(this.jq).fadeOut(this.cfg.effect);
        else if(this.cfg.effect === 'none')
            $(this.jq).hide();
    },

    isVisible: function() {
        return this.jq.is(':visible');
    },

    toggle: function() {
        if(this.isVisible())
            this.hide();
        else
            this.show();
    }

});

score 40 · Accepted Answer · edited Nov 16 '22 at 08:36

40

The component you are referring to is Growl, in the client-side it's represented by PrimeFaces.widget.Growl which has renderMessage function to render a single growl message.

Assuming you have already defined a growl component in your page with a widgetVar name:

<p:growl widgetVar="growlWV" />

Now in javascript

PF('growlWV').renderMessage({"summary":"summary goes here",
                             "detail":"detail goes here",
                             "severity":"warn"})

The severity are obviously three types :

info

info growl

warn

warn growl

error

error growl

edited Nov 16 '22 at 08:36

Jasper de Vries

19,370
6
64
102

answered Aug 28 '14 at 15:11

Hatem Alimam

9,968
4
44
56

8

I wish this was documented properly – Hubert Grzeskowiak Jun 22 '16 at 09:13
'PF('growlWV').renderMessage({"summary":"summary goes here"});' This diplaying severity type message. – Venkat Maridu Oct 10 '17 at 06:52
Is there a way to clear the existing messages via JS? – Sean Mar 01 '18 at 12:06
1

`PF('growlWV').removeAll()` This would remove all the messages in that instance of the growl. @SeanCoetzee – Hatem Alimam Mar 01 '18 at 12:18
`renderMessage` is private. I would use `add` https://primefaces.github.io/primefaces/jsdocs/classes/src_PrimeFaces.PrimeFaces.widget.Growl.html#add – Jasper de Vries Nov 16 '22 at 08:37

score -2 · Answer 2 · edited Aug 07 '18 at 04:40

-2

This worked for me with primefaces:

<script type="text/javascript">
    function validateSearch(){
               PF('growlWV').init({'msgs':'"summary":"Select a State Medical Unit or Demographic Capture Date", "severity":"info" ',
                   "life":"9000"})
           }

    }

You can see the methods here: https://searchcode.com/codesearch/view/2686099/

edited Aug 07 '18 at 04:40

Andrew Myers

2,754
5
32
40

answered Aug 07 '18 at 02:44

Sergio Soto

1

Add message to p:growl using Javascript

2 Answers2

Linked