How to apply bootstrap "alert class" to pageMessage?

Question

How can I apply bootstrap to pageMessages component on vf page?

I am getting pageMessage in standard format but I want it to display it using alert-success style class. Can anyone help?

Answer 1

I'm fairly sure (something I read on this forum, I just can't find the question!) you can't apply Bootstrap classes to <apex:pageMessage> directly or easilly, at least not in the same way you would using things like styleClass.

I suppose this is because Bootstrap's error messages contain a containing element with children, whereas Salesforce's <apex:pageMessage> renders any child elements at runtime.

Instead, you could use a boolean which, if set to true, will show a message.

In your class you'd want something like this:

public Boolean itFailed {
    get {
        if (itFailed == null)
            itFailed = false;
    }
}

Then whatever function you're using to call something like:

ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Oops!' + e));

For the Apex:PageMessage, you would just set itFailed to true as an example.

To make sure this message only appears if it's set to true, you can use the rendered= parameter: rendered="{!itFailed}" in an outputPanel or something with your Bootstrap HTML and classes inside. In other words, that outputPanel will only display if the itFailed variable is set to true.

As a result, you can have completely customised error or success messages with complete control over what they look like. You'll just have to manage when they appear in the controller, controlling that Boolean and being sure to apply a rerender action on any buttons that execute any logic for example on whatever contains your error message.

So something like this:

<apex:outputPanel id="failure" rendered="{!itFailed}">
    <!-- Bootstrap Error Message Here -->
</apex:outputPanel>
<apex:commandButton action = {!someAction} reRender="failure" />

Answer 2

You can also use apex:messages

<apex:messages layout="block" styleClass="alert alert-danger errors" style="list-style-type: none;" />