How to use b:growl

Question

I'm trying to show a specific b:growl element loaded from a bean, basically I'm try to replicate the example from the BootsFaces showcase (https://showcase.bootsfaces.net/forms/Growl.jsf;jsessionid=QdtXGdUxPK9sS714iLGuyksK93AMfZM-WfZm3py_.showcase01). I used FacesMessages.info, but I get two b:growl messages. So, how can I target the specific b:growl element to show my message? In the example from showcase: What does the messagesBean.specificInfo method do?

Edit: Thank you Stephan, but is not working for me, I still get two b:grolw messages and the one width globalOnly="true" is ignored and a standar one is showed instead.

Here is my code: xhtml:

<ui:define name="content">

    <div class="container" style="width: auto">
        <h:form id="idForm">
            <b:panel title="#{msg['administrarServicio']}" look="primary"
                id="panel" collapsible="false">

                <b:commandButton id="idBorrar" col-lg="3" col-md="3" colSm="10"
                    col-xs="10" offset-lg="2" offset-md="2" offset-sm="1"
                    offset-xs="1" value="Borrare o o o o" look="danger"
                    iconAwesome="trash" iconAlign="right"
                    action="#{serviceManagementBean.borrar}" />
            </b:panel>

            <b:growl id="growlCommonMsg" placementFrom="bottom"
                show-detail="true" show-summary="true" allowDismiss="true"
                global-only="true" delay="10000" escape="true" />

            <b:growl for="idBorrar" id="growlMsg" globalOnly="true"
                placementFrom="bottom" show-detail="true" show-summary="true"
                allowDismiss="true" delay="10000" escape="true" global-only="false"
                animation-enter="animated bounceInDown"
                animation-exit="animated flipOutX" />
        </h:form>

    </div>
</ui:define>

Java:

public void borrar() {
        System.out.println("BORRAR " + this.idTramite);
        FacesMessages.info("idForm:idBorrar", "Se boró correctamente el servicio " + this.idTramite, "Nunca va a volver. ¡Nunca!");
}

Answer 1

Let's begin with the source code you're missing. Here you go:

public void specificInfo() {
    FacesMessages.info("growlForm:ref", "Info", "This is a specific message!");
}
public void error() {
    FacesMessages.error("Error!", "Something has gone <strong>wrong</strong>.");
}

You'll notice the only difference is the number of parameters. specificInfo() includes the id growlForm:ref. You didn't include it with your code snippet, but growlForm is the id of the surrounding form (at least in our showcase). The second part of the id, ref, indicates that the FacesMessage is to be displayed by an <h:message>, <b:message>, <p:message>, <p:growl> or <b:growl> which is defined inside this form and bears the attribute for="ref".

Looking at the two <b:growl>s of the showcase, you'll see that the first growl doesn't have a for attribute. Instead, it sets globalOnly="true". This causes the growl to ignore every FacesMessage bearing an id. It'll ignore the messages generated by specificInfo().

So that's why there are two <b:growl>s in our showcase example, but every user action only triggers one of them.

There's that. Your issue is the other way round: One <b:growl> displays two growl elements on the screen. You haven't provided any Java source code (yet?), so I can only guess. The most likely explanation is that you're really generating the FacesMessage twice. I recommend setting a breakpoint in your debugger (or adding a System.out.println(), if you prefer that approach) to rule that out.

I hope I've given you enough clues to solve your issue. If not, don't hesitate to reach out to us on our bug tracker on GitHub. Please include the link to this StackOverflow question, so I can update this answer if necessary.