Display message in Visualforce Pages using apex:pageMessages

Display a message user based upon the results in apex controller. Simple example to show message using apex:pageMessage and severity values.

Its always a good practice to show valid response to user whenever the action is performed by end user, whether its an error or success. Visualforce allows very easy way to show messages on page on performing respective action. Here I am sharing the codebase to show the each type of notification based on button click. You can utilize it in implementation.

Display message in Visualforce Pages
Notification types in Visualforce Page (Classic)

As shown above, to show the alert message to end user from apex, apex:pageMessages tag in visualforce and message needs to be passed from Apex using following syntax:

ApexPages.addmessage(new ApexPages.message(ApexPages.severity.FATAL,'Showing Error Message!'));

Here severity is set to FATAL, You can replace severity value with anyone from following:

  • FATAL or ERROR
  • WARNING
  • INFO
  • CONFIRM

Depending upon the severity, Visualforce page will render message and its style as shown in above image.

apex:pageMessage from visualforce page has following attributes to render the output:

escapeIf you do not specify escape=”false”, the character escape sequence displays as written. You can execute JavaScript by setting escape attribute value to true.
idIdentifier using you can access this tag from other components.
renderedBoolean value to decide if the message needs to be shown or not.
showDetailBy default its set to true, but you can set it to false if detailed message.

Example:

Visualforce Page:

  • Created a visualforce page having 4 different command button, each for showing message for respective severity value.
  • Apex controller “VFNotificationTypesController” used to pass respective message.
  • Each button is rendering the apex:pagemessage on click of button to avoid page refresh. Its called Ajax call.
<apex:page controller="VFNotificationTypesController" lightningStylesheets="true">
    <Apex:form >
          <Apex:pagemessages id="message"></Apex:pagemessages>
          <apex:outputPanel >
              <Apex:commandButton action="{!displayError}" value="Show Error" rerender="message" style="margin: 5px;"/>
              <Apex:commandButton action="{!displayWarning}" value="Show Warning"  rerender="message" style="margin: 5px;"/>
              <Apex:commandButton action="{!displayInfo}" value="Show Info" rerender="message" style="margin: 5px;"/>
              <Apex:commandButton action="{!displayConfirm}" value="Show Confirm" rerender="message" style="margin: 5px;"/>
          </apex:outputPanel>
    </apex:form>
</apex:page>

Apex Controller:

  • Each function is linked to respective button from visualforce page.
  • ApexPages.addmessage is used to add the message back to visualforce page.
public with sharing class VFNotificationTypesController {
    public void displayError() {
        ApexPages.addmessage(new ApexPages.message(ApexPages.severity.FATAL,'Showing Error Message!'));
    }
    public void displayWarning() {
        ApexPages.addmessage(new ApexPages.message(ApexPages.severity.WARNING,'Showing Warning Message!'));
    }
    public void displayInfo() {
        ApexPages.addmessage(new ApexPages.message(ApexPages.severity.INFO,'Showing Informative Message!'));
    }
    public void displayConfirm() {
        ApexPages.addmessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Showing Confirmation!'));
    }
}