Notification Component (version 6.0+)

About the Notification Component

The Notification component is a UI component that displays a success, warning, or failure message. It is designed to replace <apex:pageMessages/> or <apex:messages/> in custom Visualforce pages.

As of the Zuora Quotes version 6.0, this component was redesigned to use an option object similar to the Property, List, and Lookup components. The component supports the following:

A warning message type formatted with a yellow background color
Modal popup mode
Up to two buttons with custom actions and labels

The component displays a title and a message body against a background color. The background color, title, and body are determined at runtime based on the success or failure value of the operation.

The Notifications component consists of the following:

Notification.component: The Visualforce component that can be embedded on a Visualforce page.
NotificationOptions.cls: The Apex class that contains the developer-specified configuration options.

Notification Component

Notification Component Attributes

The Notification component supports the following attributes.

Attribute	Type	Required?	Default Value	Description
backAction	String	No	An empty string	The JavaScript executed if the user click the Back button. If set to any non-blank value, the Back button is rendered.
backButtonLabel	String	No	Label.NOTIFICATION_GO_BACK	The label for the Back button
continueAction	String	No	An empty string	The JavaScript executed if the user clicks the Continue button. If set to any non-blank value, the Continue button is rendered.
continueButtonLabel	String	No	Label.NOTIFICATION_CONTINUE	The label of the Continue button
failureBody	String	No	N/A	The static message body upon failure. Use this attribute only if you do not want to add messages to the page context dynamically.
failureTitle	String	No	Label.Error_Page_Submission	The title for the Failure message.
id	String	Yes	N/A	An identifier that allows the component to be referenced by other components in the page
isPopup	Boolean	No	false	If true, the component renders as a modal window.
options	NotificationOptions	No	N/A	The notification options.
rendered	Boolean	No	True	Specifies whether the component is rendered on the page
successBody	String	No	N/A	The static message body upon success. Use this attribute only if you do not want to add messages to the page context dynamically.
successTitle	String	No	Label.Confirmation	The title for the Success message.

NotificationOptions Class

NotificationOptions Class Properties

The NotificationOptions class supports the following properties.

Property	Type	Required?	Default	Description
backAction	String	No	An empty string	The JavaScript executed if the user click the Back button to negate the request. If set to any non-blank value, the Back button is rendered.
backLabel	String	No	Label.NOTIFICATION_GO_BACK	The label for the Back button
continueAction	String	No	An empty string	The JavaScript executed if the user clicks the Continue button to affirm the request. If set to any non-blank value, the Continue button is rendered.
continueLabel	String	No	Label.NOTIFICATION_CONTINUE	The label of the Continue button
failureBody¹	String	No	N/A	The static message body display on failure. Important: Use this attribute only if you do not want to add messages to the page context dynamically.
failureTitle¹	String	No	N/A	The title for the failure message
isPopup	Boolean	No	false	If true, the component renders as a modal popup.
successBody¹	String	No	N/A	The static message body displayed on success. Important: Use this attribute only if you do not want to add messages to the page context dynamically.
successTitle¹	String	No	N/A	The title for the Success message
warningBody	String	No	N/A	The static message body display on warning. Important: Use this attribute only if you do not want to add messages to the page context dynamically.
warningTitle	String	No	N/A	The title for the warning message

These properties are available for the backward compatibility in Zuora Quotes Q2 '13. The component attributes values will be used and not the NotificationOptions class properties.

Sample Codes

Add a Success and Failure Message

zqu:Notification successTitle="{!$Label.CONFIRMATION}" failureTitle="{!$Label.ERROR_PAGE_SUBMISSION}"/>

You do not have to pass the actual error messages into the Notification component. You can use the standard ApexPages.addMessage() to add the Confirmation or Error messages into the page context in your Apex code. The Notification component is able to render all the messages in the Page context inside of the message box. For example:

ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.CONFIRM, Label.SENDTOZBILLING_SUCCESS));

Add a Warning Message

SampleController.cls

This sample code adds a warning message to your page.

public class SampleController {

  //Constructor
  public SampleController() {
    //Add a message of severity warning. It will automatically render in the notification component
    ApexPages.addMessage(new ApexPages.message(ApexPages.Severity.WARNING, 'This item may require further attention!'));
  }

}

SamplePage.page

This sample code displays the warning on a page.

<apex:page controller="SampleController">
  <zqu:Notification />
</apex:page>

Add a Modal Window

SampleNotificationController.cls

The following sample code adds a modal popup.

public class SampleNotificationController {

  public zqu.NotificationOptions notificationOptions {
    get;
    set;
  }

  //Constructor
  public SampleNotificationController() {
    //Init notification options
    notificationOptions = new zqu.NotificationOptions();
    notificationOptions.isPopup = true;
    notificationOptions.continueAction = 'continueToNextPage();';
    notificationOptions.backAction = 'stayOnCurrentPage();';
    notificationOptions.backLabel = 'Remain';

    //Add a page message prompting the user for input
    ApexPages.addMessage(new ApexPages.message(ApexPages.Severity.WARNING, 'Click Continue to navigate away from this page, or Remain if you wish to stay on this page'));
  }

  /* Apex methods to expose as javascript through actionFunctions */

  //Return a page reference to the next page to be navigated to
  public PageReference continueToNextPage() {
    return new PageReference('/apex/SamplePage');
  }

  //Return a null page reference to clear out page messages and stay on current page
  public PageReference stayOnCurrentPage() {
    return null;
  }
}

SampleNotification.page

This sample code displays a page with the modal popup.

<apex:page controller="SampleNotificationController">
  <apex:form>
    <!-- Expose apex methods as javascript -->
    <apex:actionFunction name="continueToNextPage" action="{!continueToNextPage}" immediate="true" />
    <apex:actionFunction name="stayOnCurrentPage" action="{!stayOnCurrentPage}" immediate="true" />
    <zqu:Notification options="{!notificationOptions}" />
  </apex:form>
</apex:page>